我正在处理一个标准的“更改密码”表单,其中有两个字段:password1 和password2。这两个字段只是为了验证用户输入的密码是否正确,并且它们需要包含相同的文本。
我添加了一条指令来验证密码,但现在我希望,如果两个字段彼此不相等,则使两个字段都无效,而不仅仅是我正在输入的字段无效。我可以这样做吗?
我尝试在两个 ngmodel 上调用 $setValidity,但我找不到从一个 ctrl.$parsers.unshift 或指令链接函数调用 $setValidity 或我当前未验证的其他字段的方法。我真的迷失了..
非常感谢!
我的指令是:
myApp.directive('validatepassword', function () {
return {
require: 'ngModel',
restrict: 'A', // only activate on element attribute
link: function (scope, elm, attrs, ngModel) {
ngModel.$parsers.unshift(function (viewValue) {
var valPasswordValue = attrs.validatepassword;
var otherPassword = $('#' + valPasswordValue)[0].value;
var valido = scope.validatePassword(viewValue, otherPassword);
ngModel.$setValidity('password', valido);
return viewValue;
});
}
};
});
我在代码中以这种方式使用:
<div class="control-group">
<label class="control-label" for="inputPassword1">Password</label>
<div class="controls">
<input id="inputPassword1" name="inputPassword1" type="password" ng-model="context.Password" required validatepassword="inputPassword2"/>
<span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword1.$valid">(*)</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword2">Repeat Password</label>
<div class="controls">
<input id="inputPassword2" name="inputPassword2" type="password" ng-model="context.Password2" required validatepassword="inputPassword1"/>
<span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword2.$valid">(*)</span>
</div>
</div>
关于如何在其中一个字段发生更改后立即验证这两个字段,有什么想法吗?
非常感谢!
最佳答案
要从一个字段触发另一个字段的验证方法,我必须手动设置另一个字段的值。您可以在 ng-change 内执行此操作:
ng-change="addEditForm.inputPassword2.$setViewValue(addEditForm.inputPassword2.$viewValue)"
当您这样做时,它应该会触发两个密码字段中的验证。
您还可以访问指令内的字段,如下所示:
scope.addEditForm.inputPassword1
所以你可以摆脱指令中的 jQuery 访问。
以下是适用于两个字段的密码验证的 HTML 部分:
<div class="control-group">
<label class="control-label" for="inputPassword1">Password</label>
<div class="controls">
<input id="inputPassword1" name="inputPassword1" type="password" ng-model="context.Password" required
validatepassword="inputPassword2" ng-change="addEditForm.inputPassword2.$setViewValue(addEditForm.inputPassword2.$viewValue)"/>
<span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword1.$valid">(*)</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword2">Repeat Password</label>
<div class="controls">
<input id="inputPassword2" name="inputPassword2" type="password" ng-model="context.Password2" required
validatepassword="inputPassword1" ng-change="addEditForm.inputPassword1.$setViewValue(addEditForm.inputPassword1.$viewValue)"/>
<span class="alert-danger invalid-form" ng-show="!addEditForm.inputPassword2.$valid">(*)</span>
</div>
</div>
关于javascript - 验证时使另一个字段无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17101120/