iT邦幫忙

DAY 8
0

我在前端 ng 時系列 第 8

自己的 input 自己驗證

在某些情況下,AngularJS 官方提供的 validation 無法滿足我們的需求。

ex: 驗證手機電話號碼、台灣的郵遞區號等。

就是要自己寫 validation 的時候了!


angularJS documentation 有簡單的範例。
https://docs.angularjs.org/guide/forms#custom-validation

以下是我參考範例寫驗證兩個 inputs 是不是有一樣的值。
(範例:請再次輸入一樣密碼的 validation)
http://plnkr.co/edit/IlVF8jMRm6uZsUvp5osb?p=preview

angular.module('myExample')

    .directive(‘myMatchValidate', function () {

        return {
            restrict: 'A',
            // 必須使用 ngModel 取得 input value 
            require: 'ngModel',
            scope: {
                // pass 想要比對的值
                match: '='
            },
            link: function (scope, element, attrs, ngModel) {
                // 假如沒有 ngModel 就不用檢查了..
                if (!ngModel) return;

                // $parsers 是檢查使用者輸入的 value
                ngModel.$parsers.unshift(checker);

                // $formatter 是檢查來自程式的改變
                ngModel.$formatters.unshift(checker);

                // watch 第一個 input value 的改變
                scope.$watch('match', function () {
                    checker(ngModel.$viewValue);
                });

                function checker (value) {
                    if (ngModel.$pristine && value) {
                        // 更新 input $dirty 跟 $pristine
                        // 因為非使用者變更不會影響到 $dirty 跟 $pristine
                        ngModel.$pristine = false;
                        ngModel.$dirty = true;
                    }
                    // 測試 value
                    var valid = scope.match === value;

                    // 重要:設定 validation 是  true 還是 false
                    ngModel.$setValidity('matchValidate', valid);

                    // return value anyway,
                    // 因為我只要確保 input validation, 不會真正取用 input value
                    return value;
                }
            }
        }
    });

例子中,ng-model 的觀念很重要的 。
官網 documentation 有解釋 ngModel 可以用來做些什麼。

截取至官網:

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

ngModel is responsible for:

  • Binding the view into the model, which other directives such as input, textarea orselect require.

  • Providing validation behavior(i.e. required, number, email, url).

  • Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).

  • Setting related css classes on the element ( ng-valid, ng-invalid, ng-dirty,ng-pristine, ng-touched, ng-untouched) including animations.

  • Registering the control with its parent form.

ngModelController 顧名思義就是 ng-model 的 controller。
裡面提供當你使用 ng-model 可以操作的 functions。
例如,$formatters 跟 $parsers 就是當 ng-model 的 value 改變的時候,所觸發的 functions。
我們可以在這兩個 functions 插入檢查點,檢查 ng-model 當下的正確性。
之後再用 ngModelController 的 $setValidity 去設定 input 的 validation 。


上一篇
AngularJS Forms 的經驗談
下一篇
自己的 input 自己 format
系列文
我在前端 ng 時30

尚未有邦友留言

立即登入留言