AngularJS比较两个输入值无法正常工作

Question

I am trying to compare two password values using AngularJS. I have the submit button disabled until all the fields are valid. However, it is not working like it is supposed to. As soon as I enter the email and the first password, the submit button becomes enabled. But if I type something else in the second password field, then the submit button becomes disabled again. How do I do the validation even when nothing is entered in the second password field?

Here, is my form.

<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>

And here is the Javascript file(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

If I can make a suggestion - do this:

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

And not use the validateEqual implementation in your directive. Here's a fiddle: http://jsfiddle.net/jochenvanwylick/U3pVM/13972/ with your code and the fix. I wouldn't make it into a directive, nor would I try to hook into the $parsers and $formatters for the element.

Answer 2

try this

.directive('validateEquals', [function () {
    return {
      require: 'ngModel',
      link: function (scope, elem, attrs, ctrl) {
        var firstPassword = '#' + attrs.validateEquals;
        elem.add(firstPassword).on('keyup', function () {
          scope.$apply(function () {
            var v = elem.val()===$(firstPassword).val();
            ctrl.$setValidity('inputmatch', v);
          });
        });
      }
    } 

on html you can check like this

<input type="password" id="input1" name="input1" ng-model="input1" ng-required/>
<input type="password" id="input2" name="input2" ng-model="input2" ng-required validate-equals="input1"/>

hope will help this solution :)

EDIT

can show error message like this

<div ng-show="myForm.$error">
  <span  ng-show="myForm.input2.$error.inputmatch">
    Passwords don't match.
  </span>
</div>