编写指令以验证"确认密码"输入字段匹配"新密码"您可以在输入字段中传入存储新密码的模型或整个输入。然而,两者都有一个严重的缺点。见下文:
传递模型方法
<form name="vm.passwordForm">
<input type="password" ng-model="vm.password.new" name="newPassword" required ng-minlength="6"/>
<input type="password" ng-model="vm.password.confirm" name="confirmPassword" required password-confirm="vm.password.new"/>
</form>
angular.module('passwordConfirm, [])
.directive('passwordConfirm', function () {
function link($scope, $element, $attrs, $ctrl) {
$ctrl.$validators.confirm = function confirm(modelValue, viewValue) {
var value = modelValue || viewValue;
if (typeof value === 'undefined' || value.length === 0) {
return true;
}
// $scope.passwordConfirm won't be set if that input is invalid
return value == $scope.passwordConfirm;
};
$scope.$watch("passwordConfirm", function () {
$ctrl.$validate();
});
}
return {
require: 'ngModel',
scope: {
passwordConfirm: "="
},
link: link
};
});
当新密码字段未通过自己的验证时,会出现上述方法的问题。比如说,用户输入&#34; abc&#34;作为新密码。这少于6个字符,因此它将无法通过ng-minlength验证,这反过来会阻止vm.password.new模型被设置为&#34; abc&#34;。如果用户随后输入了&#34; abc&#34;在确认密码字段中,他会收到一个错误,告诉他密码不匹配,即使他们这样做。
传入输入法
<form name="vm.passwordForm">
<input type="password" ng-model="vm.password.new" name="newPassword" required ng-minlength="6"/>
<input type="password" ng-model="vm.password.confirm" name="confirmPassword" required password-confirm="vm.passwordForm.newPassword"/>
</form>
angular.module('passwordConfirm, [])
.directive('passwordConfirm', function () {
function link($scope, $element, $attrs, $ctrl) {
$ctrl.$validators.confirm = function confirm(modelValue, viewValue) {
var value = modelValue || viewValue;
if (typeof value === 'undefined' || value.length === 0) {
return true;
}
return value == $scope.passwordConfirm.$viewValue;
};
// This doesn't work
$scope.$watch("passwordConfirm", function () {
$ctrl.$validate();
});
}
return {
require: 'ngModel',
scope: {
passwordConfirm: "="
},
link: link
};
});
此方法公开输入字段的$ viewValue属性,该属性不必经过验证。如果原始密码无效,则确认密码字段不会引发错误。它只关心两个字段是否匹配。但问题是$ scope。$ watch命令不起作用。我不确定为什么,但它只会在页面加载时触发一次,并且在更新字段时不会触发。
任何接近的想法都更好,如何克服每个缺点?
更新:我发现设置ng-model-options =&#34; {allowInvalid:true}&#34;即使密码验证失败,新密码字段也会更新模型,允许确认密码字段与之匹配。但是,我不确定这是最好的方法,而且我仍然很好奇为什么输入字段上的$ scope。$ watch无法正常工作。