AngularJs密码验证观看问题

Question

我有一个包含 2 个密码输入的表单。

我使用指令来验证这两种形式是否相同。

如果您先填写密码1，然后填写密码2，则目前可以使用。

问题：当你填写password1和password2并且它们相等，然后你修改password1，错误信息不会更新。我必须再次输入密码 2 才能显示错误消息。

模板

<!-- Password1-->
        <div class="form-group"
          ng-class="{ 'has-error' : userForm.password.$touched && userForm.password.$invalid,
                      'has-success' : userForm.password.$valid }">


          <div class="col-10">
            <input class="form-control" type="password" placeholder="Password"
                name="password"
                ng-model="home.user.password"
                ng-minlength="8"
                ng-maxlength="30"
                required>

            <div class="help-block" ng-messages="userForm.password.$error" ng-if="userForm.password.$touched">
                <p ng-message="minlength">Your password is too short.</p>
                <p ng-message="maxlength">Your password is too long.</p>
                <p ng-message="required">Your password is required.</p>
            </div>
          </div>
        </div>
        <!-- Password2-->
        <div class="form-group"
          ng-class="{ 'has-error' : userForm.password2.$touched && userForm.password2.$invalid,
                      'has-success' : userForm.password2.$valid }">


          <div class="col-10">
            <input class="form-control" type="password" placeholder="Confirm your password"
                name="password2"
                ng-model="home.user.password2"
                ng-minlength="8"
                ng-maxlength="30"
                password-verify="home.user.password"
                required>

            <div class="help-block" ng-messages="userForm.password2.$error" ng-if="userForm.password2.$touched">
                <p ng-message="passwordVerify">Passwords do not match.</p>
            </div>
          </div>
        </div>

passwordVerify 指令

.directive('passwordVerify', passwordVerify);


  function passwordVerify() {
    var directive = {}

    directive.require = "ngModel";
    directive.scope = { passwordVerify: '=' };
    directive.link = verifyPassword;

    return directive;

    function verifyPassword(scope, element, attrs, ctrl) {
      scope.$watch('passwordVerify', WatcherPassword1, callback);
      scope.$watch(WatcherPassword2, callback);

      function WatcherPassword1() {
        var combined;
        console.log(scope.passwordVerify);
        if (scope.passwordVerify || ctrl.$viewValue) {
           combined = scope.passwordVerify + '_' + ctrl.$viewValue;
        }
        return combined;
      }

      function WatcherPassword2() {
        var combined;
        console.log(ctrl.$viewValue);
        if (scope.passwordVerify || ctrl.$viewValue) {
           combined = scope.passwordVerify + '_' + ctrl.$viewValue;
        }
        return combined;
      }

      function callback(value) {
        if (value) {
            ctrl.$parsers.unshift(function(viewValue) {
                var origin = scope.passwordVerify;
                if (origin !== viewValue) {
                    ctrl.$setValidity("passwordVerify", false);
                    return undefined;
                } else {
                    ctrl.$setValidity("passwordVerify", true);
                    return viewValue;
                }
            });
        }
      }

    }

  }

Answer 1

我认为你还需要$watch指令中的第一个输入密码模型

更新

所以我发现了问题，$watchers 工作正常，但由于以下原因无法正常工作 ctrl.$parsers.unshift。 ctrl.$parsers.unshift 仅在 ctrl 被用户修改时执行。检查我的 JSFiddle example

   .directive('passwordVerify', passwordVerify);

    function passwordVerify() {
       return {
          require: "ngModel",
          scope: {
            passwordVerify: '='
          },
          link: function(scope, element, attrs, ctrl) {

            function checkPasswords(){

                console.log(viewValue);
                var origin = scope.passwordVerify;
                if (origin !== ctrl.$viewValue) {
                    ctrl.$setValidity("passwordVerify", false);
                    return undefined;
                } else {
                    ctrl.$setValidity("passwordVerify", true);
                    return ctrl.$viewValue;
                }
               });


            scope.$watch('passwordVerify', function(){

                 // first input changed


            }, function(){
                 checkPasswords()
             })             

            scope.$watch(function() {       

                ... code here ...
            }, function(){
                   checkPasswords()
            })