Question

我有3个输入：

<div class="form-group">

        <label for="username">Username</label>
        <input type="text" 
                ng-model="formModel.username" 
                class="form-control" 
                id="username" 
                name="username"
                required>

                <span class="help-block" 
                      ng-show="myForm.username.$error.required && myForm.username.$dirty">
                      Required
                </span>

    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" 
               class="form-control"
                id="password" 
                name="password" 
                ng-model="formModel.password" 
                required
                valid-my-password>

        <span class="help-block" 
              ng-show="myForm.password.$error.required && myForm.password.$dirty">
               Required
        </span>
        <span class="help-block" 
            ng-show="!myForm.password.$error.required && 
            myForm.password.$error.sameAs && myForm.password.$dirty || myForm.username.$dirty">
            Username and password are similar
        </span>

    </div>
    <div class="form-group">

       <label for="password_c">Approve password</label>
       <input type="password" 
       class="form-control" 
       id="password_c" 
       name="password_c" 
       ng-model="formModel.password_c" 
       required
       valid-password-c />

       <span class="help-block" 
       ng-show="myForm.password_c.$error.required && myForm.password_c.$dirty">
            You need to approve the password
       </span>

       <span class="help-block" 
       ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && 
       myForm.password.$dirty">
        Passwords don't match
       </span>
    </div>

验证效果很好。但： 1.如果密码与用户名相似，并且我尝试更改用户名，则警告dosn不会丢失。 2.如果密码和确认密码输入已填写且验证正常，并且我试图更改密码，则“密码”的提示不匹配＆＃34;没有显示。

jsFiddle

Answer 1

只需使用下面的代码段

更改错误验证

<span class="help-block" ng-show="!myForm.password.$error.required && 
            myForm.password.$error.sameAs && myForm.password.$dirty && formModel.password==formModel.username">
            Username and password are similar
        </span>

<span class="help-block" ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && 
       myForm.password.$dirty && formModel.password_c!=formModel.password">
        Passwords don't match
       </span>

这是您小提琴的更新链接

http://jsfiddle.net/vz215k94/

Answer 2

我找到了答案。我添加另一个名为“validMyUsername”的指令，我从用户名输入中调用他。在此指令中，我更改了密码验证。并且对于确认密码，我在密码指令中更改了验证。像这样：

用户名输入指令：

...
directive('validMyUsername', function () {

return {
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
        ctrl.$parsers.unshift(function (viewValue, $scope) {
            var sameAs = viewValue != scope.myForm.password.$viewValue

            scope.myForm.password.$setValidity('sameAs',sameAs);
            ctrl.$setValidity('sameAs',sameAs);

            return viewValue;
        })
    }
}

密码指令：

...
directive('validMyPassword', function () {

return {
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
        ctrl.$parsers.unshift(function (viewValue, $scope) {
              var sameAs = viewValue != scope.myForm.username.$viewValue
              var noMatch = viewValue != scope.myForm.password_c.$viewValue

            scope.myForm.password_c.$setValidity('noMatch',!noMatch);
            ctrl.$setValidity('sameAs', sameAs)

            return viewValue;
        })
    }
}

}）

以下是完整示例：jsFiddle

如何在AngularJS中使用另一个输入更改密码验证？

2 个答案: