Tìm Hiểu AngularJS - Form - Validation (P8)
Bài đăng này đã không được cập nhật trong 2 năm
- Bài trước ta đã tìm hiểu về AngularJS - SQL - DOM, còn lần này ta sẽ cùng nhau tìm hiểu về
Form, và một phần nữa không thể thiếu luôn gắn liền với Form mà bất kỳ một developer nào cũng từng nghe qua đó làValidation.
AngularJS FORM
- Form trong AngularJS dùng cơ chế data-binding và validate các thẻ input.
Data-Binding
- Thẻ input text được AngularJS cung cấp cơ chế data-binding sử dụng directive
ng-model:
<input type="text" ng-model="name">
- Với khai báo directive ng-model như trên, ứng dụng của ta có thể sử dụng thuộc tính name ở vị trí khác. Giá trị hiển thị của name ở vị trí được set sẽ thay đổi ngay tức thì khi ta thay đổi giá trị input nhập vào - đây chính là tác dụng của cơ chế Data-Binding.
- Ví dụ:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf8">
<title>AngularJS Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-init="name='Framgia'">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
- Và kết quả thu được sẽ là:
- Ban đầu directive
ng-initsẽ khởi tạo giá trị cho thuộc tính name là Framgia vì thế ta có kết quả Hello Framgia, ta cũng có thể truyền giá trị cho name bằng scope, khi đó ta cần thêm đoạn mã sau:
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.name = "Framgia";
});
</script>
- Lưu ý cần thêm directive
ng-controllerlàformCtrlvào trong myApp nữa nhé.
- Với các thẻ input còn lại cũng tương tự với thẻ input text này, nên mình sẽ nói luôn đến thẻ
Checkbox. - Tương tự các thẻ input thẻ checkbox cũng được cung cấp cơ chế data-binding sử dụng directive ng-model nhưng không giống với thẻ input, thẻ checkbox chỉ có 2 giá trị
true- checked hoặcfalse- unchecked: - Ví dụ: hiển thị ra tên công ty Framgia Viet Nam
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf8">
<title>AngularJS Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Check to show a company name:</p>
<p><input type="checkbox" ng-model="var"></p>
<h1 ng-show="var">Framgia Viet Nam</h1>
</div>
</body>
</html>
- Đối với radio buttons, directive ng-model sẽ khai báo một thuộc tính chung cho nhóm các radio, nhưng chỉ có một radio được chọn là chứa giá trị của thuộc tính đó.
- Ví dụ:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf8">
<title>AngularJS Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="">
<form>
<input type="radio" ng-model="myVar" value="div1">div1
<input type="radio" ng-model="myVar" value="div2">div2
<input type="radio" ng-model="myVar" value="div3">div3
</form>
<div ng-switch="myVar">
<div ng-switch-when="div1">
<h1>Div1</h1>
<p>Welcome to DIV1.</p>
</div>
<div ng-switch-when="div2">
<h1>Div1</h1>
<p>Welcome to DIV2.</p>
</div>
<div ng-switch-when="div3">
<h1>Div3</h1>
<p>Welcome to DIV3.</p>
</div>
</div>
</body>
</html>
- ví dụ này ta có sử dụng thêm directive
ng-switchđể kiểm tra giá trịMyVarđược chọn và hiển thị ra tương ứng. - Tương tự với
selectboxta cũng có thể làm như sau:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf8">
<title>AngularJS Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="">
<form>
<select ng-model="myVar">
<option value="chosse one">
<option value="div1">DIV1
<option value="div2">DIV2
<option value="div3">DIV3
</select>
</form>
<div ng-switch="myVar">
<div ng-switch-when="div1">
<h1>Div1</h1>
<p>Welcome to DIV1.</p>
</div>
<div ng-switch-when="div2">
<h1>Div1</h1>
<p>Welcome to DIV2.</p>
</div>
<div ng-switch-when="div3">
<h1>Div3</h1>
<p>Welcome to DIV3.</p>
</div>
</div>
</body>
</html>
AngularJS Validation
- AngularJS cho phép ta có thể validation các giá trị trong form từ phía máy khách (client-side) trước khi chuyển data lên server xử lý.
- AngularJS theo dõi trạng thái các giá trị đầu vào (input, textarea,..) và chứa các thông tin về giá trị, việc sửa đổi hoặc là chưa sửa đổi để thực hiện valid.
- Ta cũng có thể dùng chuẩn của HTML5 thể thực hiện valid, nhưng lưu ý tất cả các valid phía máy khách đều đảm bảo an toàn tuyệt đối, nên việc valid ở phía server là vẫn cần thiết.
Required
Requiredlà thuộc tính của HTML5 yêu cầu trường input không được phép rỗng
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf8">
<title>AngularJS Validation</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="">
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
- cũng là một thuộc tính của HTML5 yêu cầu text nhập vào phải là một email.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf8">
<title>AngularJS Validation</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="">
<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
- Test qua bạn sẽ thấy valid này rất đơn giản, chỉ cần vài kí tự khác rỗng trước và sau kí tự @ là đã hợp lệ, nhưng bạn lại muốn thêm email phải có tên miền nhất định,
@framgia.comchẳng hạn, thì chắc chắn bạn phải viết thêm method valid cho trường này rồi. - Ngoài ra phần validation còn rất nhiều cái phải nói như trạng thái của form, trạng thái của input, các class css,.. và một vài ví dụ nâng cao mình sẽ đề cập đến ở bài sau nhé.
Kết luận và tham khảo
-
Ở bài này phần
AngularJS Formthì tương đối dễ hiểu, chủ yếu là kiến thức cũ, không có gì là khó khăn, còn phầnAngularJS Validationthì có vẻ khá hay, mà bài này mới chỉ giới thiệu qua, thực hiện một valid cơ bản, nhưng thực tế làm việc ta thấy có rất nhiều form valid rất rắc rối, phức tạp vì thế ở bài tới ta sẽ cùng nhau tiếp tục tìm hiểu thêm một vài ví dụ về validation form để nắm rõ phần này nhé. -
Và dưới đây là một số nguồn mình tham khảo trong khi viết bài:
- Nếu các bạn có ý kiến đóng góp xin vui lòng để lại comment bên dưới, chúng ta sẽ cùng nhau mổ xẻ vấn đề. Xin cảm ơn!
All rights reserved
