javascript - Angular 自定义验证器不反射(reflect) View 中的更改

Question

我有这样的自定义验证器:

export class PasswordValidator {
    static MatchPassword(AC: AbstractControl) {
        const formGroup = AC.parent;

        if(formGroup) {
            let password = formGroup.value.password // to get value in input tag
            let confirmPassword = formGroup.value.confirmPassword; // to get value in input tag
            if(password != confirmPassword) {
                formGroup.get('confirmPassword').setErrors({ matchPassword: true });
            } else {
                formGroup.get('confirmPassword').setErrors(null);
            }
            console.log(formGroup.get('confirmPassword').errors);
        } else {
            return null
        }
     }
}

我已经添加到表单中:

this.registerationForm.addControl("confirmPassword", new FormControl('', Validators.compose([Validators.required, PasswordValidator.MatchPassword])));

在 View 中:

  <ion-item class="error-message" *ngIf="registerationForm.controls.confirmPassword.hasError('matchPassword') 
    && registerationForm.controls.confirmPassword.touched">
    <p>Some message*</p>
  </ion-item>

但问题是我可以看到控制台窗口，但我没有看到它反射(reflect)在 View 中。 ngIf 条件未显示错误消息

Answer 1

当您在 Angular 运行更改检测后更新了模型，或者更新根本不在 Angular 世界中时，请使用 detectorChanges()。

如果您使用 OnPush 并且通过更改某些数据来绕过 ChangeDetectionStrategy 或者您已在 setTimeout 内更新了模型，请使用 markForCheck()；

export class PasswordValidator {
static MatchPassword(AC: AbstractControl) {
    const formGroup = AC.parent;

    if(formGroup) {
        let password = formGroup.value.password // to get value in input tag
        let confirmPassword = formGroup.value.confirmPassword; // to get value in input tag
        if(password != confirmPassword) {
            formGroup.get('confirmPassword').setErrors({ matchPassword: true });
        } else {
            formGroup.get('confirmPassword').setErrors(null);
        }
        console.log(formGroup.get('confirmPassword').errors);
        this.ref.markForCheck();
    } else {
        return null
    }
 }
}

添加 this.ref.markForCheck();更新表单后。