我有一个包含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;
}
});
}
}
}
}
答案 0 :(得分:1)
我认为您还需要DataGrid
指令
<强>更新强>
所以我发现了问题,<ContentControl Content="{Binding}">
工作正常,因为没有工作
Content
。 DataTrigger
仅在用户修改$watch
时执行。检查我的JSFiddle example
$watchers