validation - 如何强制运行 Angular 验证指令？

Question

我为我的表单创建了一个验证指令。
它基本上根据来自另一个字段的数据验证字段值。

它工作完美:-)

我的问题是，如果在执行验证后其他字段发生变化，验证将不会再次运行。

var myApp = angular.module('myApp', [])

.directive('validateInteger', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
          var int1val = scope.int1;
          scope.int2valid = (viewValue > int1val) ? "valid" : undefined;
          if (scope.int2valid == "valid") {
              ctrl.$setValidity('higher', true);
              return viewValue;
          } else {
              ctrl.$setValidity('higher', false);
              return undefined;
        }
      });
    }
  };
});

jsfiddle: http://jsfiddle.net/hanspc/vCFFQ/

Answer 1

明确引用指令中的某些字段是一个非常糟糕的主意。如您所见，这有很多缺点:不可移植性、代码重复、易碎性……

做这样的事情:

<input type="text" ng-model="int2" validate-greater-integer="int1" />

和 :

myApp.directive('validateGreaterInteger', function() {
    return {
    require: 'ngModel',
    scope: {
        otherInteger : '=validateGreaterInteger',
    }
    link: function(scope, elm, attrs, ctrl) {
        ctrl.$parsers.unshift(function(viewValue) {
        if (viewValue > scope.otherInteger) {
            ctrl.$setValidity('higher', true);
            return viewValue;
        } else {
            ctrl.$setValidity('higher', false);
            return undefined;
        }
    }
});

然后你可以简单地做 the typical state control (参见“绑定(bind)到表单和控制状态”部分的示例)。

请注意，在这种情况下，您还可以更简单地使用 input[number]及其 min范围。

在评论讨论后编辑:

嗯， NgModelController.$parsers 中的函数显然只有在模型的内容发生变化时才会调用。您要做的是在任何时候进行验证 int1或 int2改变。所以就去做吧:-):

link: function(scope, elm, attrs, ctrl) {
    scope.$watch('data', function (data) {
      if (data.int2 > data.int1) {
          ctrl.$setValidity('higher', true);
          return data.int2;
      } else {
          ctrl.$setValidity('higher', false);
          return undefined;
    }
  }, true);

使用你自己的验证变量( int2valid 在你的 fiddle 中)也很奇怪。请使用 the typical state control , 类似于 form.int2.$error.higher .