Question

我的表单有两个输入字段，如下所示：

<input type="password" name="password" ng-model="password"  placeholder="Enter password"  class="form-control" />
<input type="password" name="password_confirm" ng-model="password_confirm" placeholder="Confirm password" class="form-control" validate-equals="password" />

请匹配密码

预期：仅当第二个输入字段为$ dirty且与第一个字段

不匹配时，才会触发第二个输入下方的错误

然而，这种行为未能实现。

app.directive('validateEquals', function(){

  return {
    require: "ngModel",
    link: function(scope, element, attrs, ngModelCtrl) {

      function validateEqual(value) {
        var valid = (value === scope.$eval(attrs.validateEquals));
        ngModelCtrl.$setValidity('equal', valid);
        return valid ? value : undefined;
      }

      ngModelCtrl.$parsers.push(validateEqual);
      ngModelCtrl.$formatters.push(validateEqual);

      scope.$watch(attrs.validateEquals, function(){
        ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue)
      });

    }

  };

})

请查看full plnkr here

Answer 1

罪魁祸首就是这只手表：

scope.$watch(attrs.validateEquals, function(){
   ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue)
});

在$watch启动时启动，在您已设置属性$setViewValue()的输入上调用validateEquals（具体为password_confirm）。调用$setViewValue会导致该字段被标记为$dirty（因为您要将字段设置为某个字段）。

我没有看到$watch的原因，viewValue只是将{{1}}设置为已有的{{1}}。所以，除非我遗漏了什么，否则你应该把它删除 - 从而解决你的问题。

工作plnkr：http://plnkr.co/edit/4QAjucKLVa2MWAjAcGcf?p=preview

即使表单字段是$ pristine，也会触发事件

1 个答案: