javascript - AngularJS 比较两个输入值无法按预期工作

Question

我正在尝试使用 AngularJS 比较两个密码值。我禁用了提交按钮，直到所有字段都有效。然而，它并没有像预期的那样工作。一旦我输入电子邮件和第一个密码，提交按钮就会启用。但是，如果我在第二个密码字段中输入其他内容，则提交按钮将再次被禁用。即使第二个密码字段中未输入任何内容，如何进行验证？

这是我的表格。

<form ng-submit="submit()" name="register" class="form-signin" novalidate>
<h1 class="form-signin-heading text-muted">
    Register
</h1>
<input name="email" ng-model="email" type="email" class="form-control" placeholder="Email address" required>
<p class="help-block" ng-show="register.email.$dirty && register.email.$invalid">Please enter a valid email</p>
<input name="password" ng-model="password" type="password"class="form-control" placeholder="Password" required>
<input name="password_confirm" ng-model="password_confirm" type="password" class="form-control" placeholder="Confirm Password" validate-equals='password'>
<p class="help-block" ng-show="register.password_confirm.$dirty && register.password_confirm.$invalid">The passwords do not match</p>
<button ng-disabled="register.$invalid" class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>

这是 Javascript 文件(validateEquals.js)

'use strict';

angular.module('jwtApp').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);
            });
        }
};
});

Answer 1

如果我可以提出建议 - 这样做:

<button ng-disabled="register.$invalid || password != password_confirm" class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>

并且不要在指令中使用 validateEqual 实现。这是一个 fiddle :http://jsfiddle.net/jochenvanwylick/U3pVM/13972/与您的代码和修复。我不会将其放入指令中，也不会尝试 Hook 元素的 $parsers 和 $formatters 。