Question

我已为密码字段编写了自定义验证程序，以验证以下情况：

如果用户已定义id，则密码始终有效（可以为空，表示无更改）
如果用户没有定义id，则密码不能为空（新用户必须有密码）

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

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

Answer 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关心其他密码字段。

Answer 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();
       });
   }
  };
  );

Angular：强制自定义表单验证程序在任何字段输入

2 个答案: