Tìm Hiểu AngularJS - Validation (P9)

Bài đăng này đã không được cập nhật trong 8 năm

Để tiếp tục bài viết tìm hiều về AngularJS - Form - Validation ở phần trước, phần này ta sẽ đi sâu hơn vào phần Validation, xem xét một vài ví dụ để hiểu rõ hơn hoạt động của nó.

AngularJS Validation

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.

Form State and Input State

AngularJs liên tục cập nhật trạng thái của Form và các thẻ input khi bạn thực hiện thao tác thay đổi lên chúng.
Thẻ input sẽ có các trạng thái sau:

$untouched: Trường này chưa được chạm vào.

$touched: Trường này đã được chạm vào.

$pristine: Trường này chưa được thay đổi.

$dirty: Trường này đã được thay đổi.

$invalid: Trường có nội dung không hợp lệ.

$valid: Trường có nội dung hợp lệ.

Giá trị trả lại khi ta kiểm tra các trạng thái sẽ là true hoặc false.
Form thì sẽ có các trạng thái sau:

$pristine: Không có trường nào được thay đổi.

$dirty: Có một trường hoặc nhiều trường đã được thay đổi.

$invalid: Nội dung Form là không hợp lệ.

$valid: Nội dung Form là hợp lệ.

$submitted: Form đã được submit.

Tương tự như thẻ input thì các thuộc tính của Form cũng có giá trị trả lại là true hoặc false.
Ta có thể sử dụng các trạng thái trên để hiển thị ra thông báo chỉ dẫn cho người dùng nhập đúng form yêu cầu.

CSS Classes

AngularJS tự động thêm các class CSS cho Form và các thẻ Input tùy thuộc vào trạng thái của chúng.
Những class dưới đây sẽ được tự động thêm vào hoặc xóa đi khỏi thẻ input:

ng-untouched: Trường này chưa được chạm vào.

ng-touched: Trường này đã được chạm vào.

ng-pristine: Trường này chưa được thay đổi.

ng-dirty: Trường này đã được thay đổi.

ng-valid: Trường có nội dung hợp lệ.

ng-invalid: Trường có nội dung không hợp lệ.

ng-valid-key: key tương ứng với mỗi validation. Ví dụ: ng-valid-required, trường đã có nội dung

ng-invalid-key: Ví dụ: ng-invalid-required, trường không có nội dung

Những class dưới đây sẽ được tự động thêm vào hoặc xóa đi khỏi Form:

ng-pristine: Không có trường nào được thay đổi.

ng-dirty: Có một trường hoặc nhiều trường đã được thay đổi.

ng-valid: Nội dung Form là hợp lệ.

ng-invalid: Nội dung Form là không hợp lệ.

ng-valid-key: key tương ứng với mỗi validation. Ví dụ: ng-valid-required, có một hoặc nhiều hơn một trường đã có nội dung

ng-invalid-key: Ví dụ: ng-invalid-required, chưa trường nào có nội dung

class sẽ được xóa bỏ khi giá trị mà nó đại diện là false.
Ta có thể thêm các style vào các class trên để ứng dụng của ta có giao diện người dùng tốt hơn, trở nên trực quan, đẹp mắt hơn. Chẳng hạn như:

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

Xem demo ví dụ này.

Custom Validation

Như ví dụ ở phần trước mục AngularJS Validation / Email ta valid email bằng cách sử dụng thuộc tính email của HTML5, nhưng valid này khá đơn giản. Bây giờ ta sẽ tạo ra một Directive chứa hàm custom validation thực hiện kiểm tra xem email đã nhập có tên miền @framgia.com hay khô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="myApp">
        <form name="myForm">
            <input name="myInput" ng-model="myInput" type="email" required my-directive>
        </form>

        <p>The input's valid state is:</p>
        <h1>{{myForm.myInput.$valid}}</h1>
    </body>
    <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("framgia.com") > -1) {
                                mCtrl.$setValidity('char', true);
                            } else {
                                mCtrl.$setValidity('char', false);
                            }
                            return value;
                        }
                        mCtrl.$parsers.push(myValidation);
                    }
                };
            });
    </script>
</html>

Xem demo ví dụ này.

Trong javascript ta định nghĩa một Directive mới với tên là myDirective thì trong HTML ta gọi chúng bằng cách sử dụng thuộc tính my-directive. Lưu ý định nghĩa thì tên có dạng camel case còn gọi thì dùng đấu -.
Ban đầu trạng thái của input sẽ là false do thuộc tính require, nhưng khi bạn nhập giá trị vào input (không chứa @framgia.com) thì trạng thái vẫn là false, lý do là my-directive đang trả lại false.
Đối số thứ tư mCtrl trong hàm link chính là ngModelController, và ta viết một custom validate với tên myValidation và đối số value chính là gía trị nhập vào của ô input.
Trong myValidation ta sẽ kiểm tra xem chuỗi nhập vào có chứa @framgia.com hay không và trả lại true hoặc false.
Cuối cùng mCtrl.$parsers.push(myValidation) sẽ thêm myValidation vào mảng các validation mặc định, nó sẽ được thực hiện khi ta thay đổi giá trị đầu vào tại ô input.

Kết luận và tham khảo

Bài này ta đã tìm hiểu nốt phần AngularJS Validation mà ở bài trước ta chưa nhắc đến, ta cần nắm được các trạn thái của Form, của các thẻ input cũng như các class add thêm hay remove khi nào để thuận lợi tạo ra giao diện ứng dụng đẹp mắt, dễ sử dụng cho người dùng. Ngoài ra cũng cần nắm được cách tạo ra một custom validation để xử lý các trường hợp cần valid phức tạp.
Và dưới đây là một số nguồn mình tham khảo trong khi viết bài: