Question

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

我使用指令来验证2个表单是否相同。

如果您先填写密码1并输入密码2秒，它目前有效。

问题：当您填写密码1和密码2并且它们相等时，之后您更改密码1，错误消息不会更新。我必须再次键入password2才能显示错误消息。

模板

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

我认为您还需要DataGrid指令

中的第一个输入密码模型

<强>更新

所以我发现了问题，<ContentControl Content="{Binding}">工作正常，因为没有工作 Content。 DataTrigger仅在用户修改$watch时执行。检查我的JSFiddle example

$watchers

AngularJs密码验证看问题

1 个答案: