AngularJS: Validate trong AngularJS

Đăng ký nhận thông báo về những video mới nhất

AngularJS có thể validate dữ liệu đã input.

Validate Form

AngularJS cung cấp việc validate form từ phía trình khách (client-side).

AngularJS tính toán trạng thái của form và các trường input (input, textarea, select) và nhắc người dùng về trạng thái hiện thời.

AngularJS cũng mang thông tin về việc chúng có được chạm, thay đổi hay không.

Ta có thể sử dụng các thuộc tính của chuẩn HTML5 để validate các input, hoặc ta cũng có thể tự tạo các hàm validate.

Validate phía client-side không thể bảo mật thông tin input, vì thế ta cần thực hiện thêm việc validate từ server.

Required

Thuộc tính required của HTML 5 dùng để check trống trường input.

Ví dụ

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

E-mail

Kiểu email dùng để yêu cầu rằng dữ liệu điền vào input phải là một e-mail.

Ví dụ

<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>

Trạng thái Form và trạng thái Input

AngularJS liên tục cập nhật trạng thái của cả form và các trường input.

Các trường input có các trạng thái như sau:

  • $untouched Trường không được chạm
  • $touched Trường được chạm
  • $pristine Trường không được thay đổi (modify)
  • $dirty Trường được thay đổi
  • $invalid Nội dung trường không hợp lệ.
  • $valid Nội dung trường hợp lệ.

Các trường trên đều là thuộc tính của trường input, ngoài ra bao gồm cả true và false.

Form có những trạng thái sau:

  • $pristine Không trường nào được thay đổi
  • $dirty Một hoặc nhiều trường được thay đổi
  • $invalid Nội dung form không hợp lệ
  • $valid Nội dung form hợp lệ
  • $submitted Form được submit

Tất cả các thuộc tính trên đều là của form, bao gồm cả true hoặc false.

Ta có thể sử dụng những trạng thái này để hiển thị thông báo có ý nghĩa đến người dùng. Ví dụ, nếu một trường được yêu cầu nhưng ta không điền dữ liệu thì ta cần đưa ra thông báo.

Ví dụ:

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>

CSS Class

AngularJS thêm các class của CSS vào form và các trường input phụ thuộc vào các trạng thái của chúng.

Những lớp được thêm vào hoặc bỏ đi từ trường input:

  • ng-untouched Trường không được chạm vào.
  • ng-touched Trường được chạm.
  • ng-pristine Trường không được thay đổi
  • ng-dirty Trường được thay đổi
  • ng-valid Trường nội dung hợp lệ
  • ng-invalid Trường nội dung không hợp lệ.
  • ng-valid-key Một key cho mỗi lần validate. Ví dụ: ng-valid-required hữu dụng khi có nhiều hơn một thứ gì đó phải được validate.
  • ng-invalid-key Ví dụ: ng-invalid-required

Các class sau được thêm hoặc bỏ đi từ form:

  • ng-pristine Không có trường nào được thay đổi
  • ng-dirty Một hoặc nhiều trường được thay đổi
  • ng-valid Nội dung form hợp lệ
  • ng-invalid Nội dung form không hợp lệ
  • ng-valid-key Một key cho mỗi lần validate. Ví dụ: ng-valid-required hữu dụng khi có nhiều hơn một trường phải được validate.
  • ng-invalid-key Ví dụ: ng-invalid-required

Các class đã được remove nếu giá trị mà chúng thể hiện là false.

Thêm các style cho những class này để cung cấp cho ứng dụng một giao diện đẹp hơn và trực quan hơn.

Ví dụ

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

Form cũng có thể được style.

Ví dụ

Nạp style cho form unmodified (pristine) và form modified:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

Validate tùy chỉnh

Để tạo hàm validate tùy chỉnh thì ta cần thêm một chút công sức. Ta phải thêm một chỉ thị mới cho ứng dụng và đối phó với việc validate trong một hàm với các đối số được chỉ định.

Ví dụ

Tạo chỉ thị tùy chỉnh có chứa một hàm validate tùy chỉnh và tham chiếu tới nó bằng việc sử dụng my-directive.

Trường chỉ chứa dữ liệu hợp lệ khi có chứa ký tự 'e'.

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});
</script>

Giải thích ví dụ:

Trong HTML, một chỉ thị mới sẽ được tham chiếu bằng cách sử dụng thuộc tính my-directive.

Trong JavaScript ta kích hoạt bằng cách thêm một chỉ thị mới có tên myDirective.

Cần nhớ rằng khi đặt tên của chỉ thị thì bạn phải sử dụng cách thực đặt tên kiểu camel (lạc đà), myDirective, nhưng khi gọi nó thì ta phải sử dụng ký tự nối -, my-directive.

Sau đó trả về một đối tượng trong đó bạn chỉ định rằng ta yêu cầu ngModel, đó là ngModelController.

Tạo một hàm liên kết bao gồm một số đối số, trong đó đối số thứ tư mCtrl là ngModelController,

Sau đó chỉ định một hàm, trong trường hợp này hàm có tên là myValidation, hàm này có một đối số, đối số này là giá trị của phần tử input.

Kiểm tra xem giá trị nhập vào có chứa ký tự 'e' không, và thiết lập validate của model controller là true hoặc false.

Cuối cùng, mCtrl.$parsers.push(myValidation); sẽ thêm hàm myValidation vào một mảng các hàm khác, điều này sẽ được thực thi mỗi khi giá trị của input thay đổi.

Ví dụ về Validate

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>

</body>
</html>

Thuộc tính novalidate dùng để disable việc validate form.

Giải thích ví dụ

Chỉ thị AngularJS ng-model sẽ liên kết các phần tử input tới model.

Đối tượng model có hai thuộc tính: user và email.

Vì chỉ thị ng-show, nên các thẻ <span> với color:red chỉ được hiển thị khi người dùng hoặc email là $dirty và $invalid.

Đăng ký nhận thông báo về những video mới nhất
« Prev: AngularJS: Form trong AngularJS
» Next: AngularJS: API trong AngularJS
Copied !!!