我有这个代码：
this.form = fb.group({
username: ['',Validators.compose([Validators.required])],fullName: ['',password: ['',confirmPassword: ['',Validators.required],},{validator: matchingPasswords('password','confirmPassword')});
matchingPasswords：
export function matchingPasswords(passwordKey: string,passwordConfirmationKey: string) {
return (group: FormGroup) => {
let password = group.controls[passwordKey];
let passwordConfirmation = group.controls[passwordConfirmationKey];
if (password.value !== passwordConfirmation.value) {
return passwordConfirmation.setErrors({mismatchedPasswords: true})
}
}
}
HTML：
<div class="form-group">
<input [formControl]="confirmPassword" class="form-control checking-field" type="password">
<span class="help-block text-danger" *ngIf="form.get('password').touched && form.get('password').hasError('required')">
</div>
<div class="form-group">
<input class="custom-control-input checkBox-main" type="checkBox" [(ngModel)]="policyButtonValue" [ngModelOptions]="{standalone: true}" ngDefaultControl>
<span class="custom-control-indicator"></span>
</div>
这是功能性的,并且运行良好,但我有一个特殊的用例场景应该修复.
>单击第一个密码字段.
>填写密码,例如：“foo”
>单击确认密码字段.
> tpye同样的事情,例如：“foo”
直到这一点,没有问题.
>在确认密码字段中键入不同的内容,例如：“foobar”
(此时,验证器显示此处存在错误)
>单击密码字段
>输入密码字段中的相同内容：“foobar”
在这里,确认密码字段仍然无效,直到密码字段失去焦点…
有没有办法,强制matchupPassword验证在keyup事件上运行,而不是现在如何工作？
解决方法
你需要一个else块：
if (password.value !== passwordConfirmation.value) {
passwordConfirmation.setErrors({mismatchedPasswords: true})
}
else {
passwordConfirmation.setErrors(null);
}
