自定義表單驗證

在某些情況下,基本驗證是不夠的。角度支援自定義驗證將驗證器函式新增到 ngModelController 上的 $validators 物件:

angular.module('app', [])
  .directive('myValidator', function() {
    return {
      // element must have ng-model attribute
      // or $validators does not work
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.myValidator = function(modelValue, viewValue) {
            // validate viewValue with your custom logic
            var valid = (viewValue && viewValue.length > 0) || false;
            return valid; 
        };
      } 
    };

驗證器被定義為需要 ngModel 的指令,因此要應用驗證器,只需將自定義指令新增到輸入表單控制元件即可。

<form name="form">
  <input type="text" 
         ng-model="model" 
         name="model" 
         my-validator>
  <pre ng-bind="'my-validator returned: ' + form.model.$valid"></pre>
</form> 

並且 my-validator 不必應用於本機表單控制元件。它可以是任何元素,只要它的屬性為 ng-model 即可。當你有一些自定義構建 ui 元件時,這很有用。

StackOverflow 文件