Angular：强制自定义表单验证器在任何字段输入上运行答案

【问题标题】：Angular: force custom form validator to run on any field inputAngular：强制自定义表单验证器在任何字段输入上运行
【发布时间】：2016-09-06 17:39:36
【问题描述】：

我为密码字段编写了一个自定义验证器，以验证以下场景：

如果用户定义了 id，那么密码总是有效的（可以为空，表示没有变化）
如果用户没有定义id，那么密码不能为空（新用户必须有密码）

问题是，我注意到验证器仅在用户与字段交互时运行（与显然在任何输入上运行的required 不同）。即使新用户的密码为空，这也会使表单看起来有效。一旦我与密码输入交互，一切似乎都很好。

我已经通过记录不充分的ngRequired 指令解决了业务逻辑要求，但我真的很想了解有关自定义验证器的问题，以防我再次遇到它。

【问题讨论】：

标签： angularjs forms angularjs-validation

【解决方案1】：

您可以在这里尝试ui-validate 与您的业务：

$scope.passwordValidation = {
                length: '$value.length >= 5 || $value.length == 0'
            };
$scope.password2Validation = {
                same_passwords: 'userPassword.value==$value'
            };

然后是你的 HTML：

<input id="password" class="form-control" type="password" ng-model="userPassword.value"
                   name="password" ui-validate="passwordValidation"/>
<input id="password2" class="form-control" type="password" ng-model="userPassword.confirm"
                   name="password2" ui-validate="password2Validation" ui-validate-watch="'userPassword.value'"/>

请注意ui-validate-watch 告诉 ui-validate 关心其他密码字段。

【讨论】：

这似乎是解决整体问题的好方法，但我真的很想知道为什么自定义验证器没有按预期工作。

【解决方案2】：

放弃这个之后，我又遇到了这个问题，我找不到解决方法。 Fortunatel，我找到了解决方案：

当您制作自定义验证器时，您需要将其绑定到模型字段，而不是表单字段。这使得它始终正确验证（可以假设由于表单字段上的 $modelValue 和 $viewValue 属性之间的差异会造成混淆）。请参阅下面的代码以供参考：

<input type="password" class="form-control" id="confirmpass" name="confirmpass" placeholder="Repeat Password"
                       ng-model="controller.selectedUser.passwordRepeat"
                       compare-to="controller.selectedUser.password"/>

和自定义验证器：

angular.module("compareTo", []).directive("compareTo", function() {
   return {
       require: "ngModel",
       scope: {
       otherModelValue: "=compareTo"
   },
   link: function(scope, element, attributes, ngModel) {

       ngModel.$validators.compareTo = function(modelValue) {
           return modelValue == scope.otherModelValue;
       };

       scope.$watch("otherModelValue", function() {
           ngModel.$validate();
       });
   }
  };
  );

【讨论】：