Angular 2 在 keyup 上强制自定义验证

Question

我有这个代码：

this.form = fb.group({
        username: ['', Validators.compose([Validators.required])],
        fullName: ['', Validators.compose([Validators.required])],
        password: ['', Validators.compose([Validators.required])],
        confirmPassword: ['', Validators.required],
    }, {validator: matchingPasswords('password', 'confirmPassword')});

匹配密码：

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"
单击确认密码字段。
输入相同的内容，例如："foo" 到目前为止，没问题。
在确认密码字段中输入不同的内容，例如："foobar" （此时验证器显示这里有错误）
单击密码字段
在密码字段中输入相同的内容："foobar" 而这里，确认密码字段仍然无效，直到密码字段失去焦点...... 有没有办法在 keyup 事件上强制进行匹配密码验证运行，而不是现在如何工作？

Answer 1

您需要一个 else 块：

if (password.value !== passwordConfirmation.value) {
    passwordConfirmation.setErrors({mismatchedPasswords: true})
}
else {
    passwordConfirmation.setErrors(null);
}

Angular 2 在 keyup 上强制自定义验证

Angular 2 force custom validation on keyup

validation

angular2-formbuilder

angular