Question

那么，问题是什么。我有两个输入字段newPassword和oldPassword。我想检查这两个字段是否等于显示错误消息。表单如下所示：

<form name="passwordForm" ng-submit="submitPasswordForm()" modelAttribute="userPasswordChange" novalidate>
        <div class="row">
            <input path="oldPassword" type="password" id="oldPassword" name="oldPassword" placeholder="Old Password" ng-model="user.oldPassword" minlength="5" maxlength="128" required/>
            <br>
            <span ng-show="passwordForm.oldPassword.$dirty && passwordForm.oldPassword.$error.required">Old Password field can not be empty. Please check it and try again.</span>
            <span ng-show="passwordForm.oldPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">Old password field size must be between 5 and 128</span>
        </div>
        <div class="row">
            <input path="newPassword" type="password" id="newPassword" name="newPassword" placeholder="New Password" ng-model="user.newPassword" minlength="5" maxlength="128" required diff-values="oldPassword"/>
            <br>
            <span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.required">New Password field can not be empty. Please check it and try again.</span>
            <span ng-show="passwordForm.newPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">New Password field size must be between 5 and 128</span>
            <span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.differentValues">New Password and Old Password fields must have different values.</span>
        </div>
        <div class="row">
            <input path="confirmPassword" type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm password" ng-model="user.confirmPassword" minlength="5" maxlength="128" same required/>
            <br>
            <span ng-show="passwordForm.confirmPassword.$dirty && passwordForm.confirmPassword.$error.required">Confirm password field can not be empty. Please check it and try again.</span>
            <span ng-show="passwordForm.confirmPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">Confirm password field size must be between 5 and 128</span>
        </div>
        <div class="row">
            <input id="save" type="submit" value="Save" class="btn btn-primary" onsubmit="submitPasswordForm()"  
               ng-disabled="passwordForm.oldPassword.$dirty && passwordForm.oldPassword.$invalid
                           || passwordForm.newPassword.$dirty && passwordForm.newPassword.$invalid
                           || passwordForm.confirmPassword.$dirty && passwordForm.confirmPassword.$invalid"/>
        </div>
</form>

因此，如果我理解正确，我必须创建我自己的指令。所以我用这种方式意识到了：

var postPasswordForm = angular.module('postPasswordForm', []);
    postPasswordForm.directive('diffValues', function () {
        return {
            restrict: "A",
            link: function (scope, elem, attr, ctrl) {
            ctrl.$parsers.push(function (value) {
                var compareWith = document.getElementById(attr.diffValues).value;
                var currentVar = value;
                ctrl.$setValidity('differentValues', compareWith !== currentVar);

                console.log(scope);    
                return value;
            });
        }
    };
});

问题是，对于这个任务，我还需要观察旧密码更改时，并根据表达式显示\隐藏此范围：

<span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.differentValues">New Password and Old Password fields must have different values.</span>

当然会更改此值

passwordForm.newPassword.$error.differentValues:

有人可以帮助我解释如何以正确的方式做到这一点吗？我会感谢任何想法，解释和链接。提前谢谢。

Answer 1

我已经用下一个方法解决了这个问题：

<form name="passwordForm" ng-submit="submitPasswordForm()" modelAttribute="userPasswordChange" novalidate>
        <div class="row">
            <input path="oldPassword" type="password" id="oldPassword" name="oldPassword" placeholder="Old Password" ng-model="user.oldPassword" minlength="5" maxlength="128" required/>
            <br>
            <span ng-show="passwordForm.oldPassword.$dirty && passwordForm.oldPassword.$error.required">Old Password field can not be empty. Please check it and try again.</span>
            <span ng-show="passwordForm.oldPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">Old password field size must be between 5 and 128</span>
        </div>
        <div class="row">
            <input path="newPassword" type="password" id="newPassword" name="newPassword" placeholder="New Password" ng-model="user.newPassword" minlength="5" maxlength="128" required diff-values="user.oldPassword"/>
            <br>
            <span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.required">New Password field can not be empty. Please check it and try again.</span>
            <span ng-show="passwordForm.newPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">New Password field size must be between 5 and 128</span>
            **CHANGED HERE:**<span ng-show="passwordForm.newPassword.$dirty && passwordForm.newPassword.$error.differentValues">New Password field must be different from the Old Password field.</span>
        </div>
        <div class="row">
            <input path="confirmPassword" type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm password" ng-model="user.confirmPassword" minlength="5" maxlength="128" same required/>
            <br>
            <span ng-show="passwordForm.confirmPassword.$dirty && passwordForm.confirmPassword.$error.required">Confirm password field can not be empty. Please check it and try again.</span>
            <span ng-show="passwordForm.confirmPassword.$error.minlength || passwordForm.oldPassword.$error.maxlength">Confirm password field size must be between 5 and 128</span>
        </div>
        <div class="row">
            <input id="save" type="submit" value="Save" class="btn btn-primary" onsubmit="submitPasswordForm()"  
               ng-disabled="passwordForm.oldPassword.$dirty && passwordForm.oldPassword.$invalid
                           || passwordForm.newPassword.$dirty && passwordForm.newPassword.$invalid
                           || passwordForm.confirmPassword.$dirty && passwordForm.confirmPassword.$invalid"/>
        </div>
</form>

指令功能改为这一个：

postPasswordForm.directive('diffValues', function () {
        return {
            restrict: "A",
            require: 'ngModel',
            scope: {
            otherModelValue: "=diffValues"
            },
            link: function (scope, elem, attr, ctrl) {
            ctrl.$validators.diffValues = function (modelValue) {
                ctrl.$setValidity('differentValues', modelValue !== scope.otherModelValue);
            };

            scope.$watch("otherModelValue", function () {
                ctrl.$validate();
            });
        }
    };
});

我昨天第一次开始使用角度，所以如果问一些简单的事情就很抱歉。正如我所理解的那样，它不是更好的解决方案，因为从文档中我可以读到$ validate（） - 从$ validators集合中调用所有验证器。但我需要只运行其中一个。我能以某种方式这样做吗？或者这个解决方案可以吗？

比较angularjs中指令实现中两个字段的正确方法是什么？

1 个答案: