如何修复Angular表单密码匹配验证的错误提示不显示问题

你的密码匹配验证器将mismatch错误添加到了FormGroup实例上，但Angular Material的mat-form-field仅在自身关联的FormControl处于invalid状态时才会显示错误提示。当两个密码输入都满足自身的验证规则（必填、长度、格式）时，confirmedPassword控件状态为valid，此时即使FormGroup存在错误，mat-form-field也不会触发显示对应的mat-error，这就是特定场景下错误提示不显示的原因。

方案一：将匹配错误绑定到确认密码控件（推荐） #

修改密码匹配验证器，把mismatch错误直接附加到confirmedPassword控件上，让mat-form-field能识别到控件的错误状态：

import { AbstractControl, ValidationErrors, ValidatorFn } from "@angular/forms";

export const matchingPasswords: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
    const password = control.get('password');
    const confirmedPassword = control.get('confirmedPassword');

    if (!password || !confirmedPassword) return null;

    // 密码不匹配时，为确认密码控件添加mismatch错误，保留原有错误
    if (password.value !== confirmedPassword.value) {
        confirmedPassword.setErrors({
            ...confirmedPassword.errors,
            'mismatch': true
        });
    } else {
        // 密码匹配时，移除mismatch错误
        if (confirmedPassword.errors?.['mismatch']) {
            delete confirmedPassword.errors['mismatch'];
            // 若没有其他错误，清空控件错误对象
            if (Object.keys(confirmedPassword.errors || {}).length === 0) {
                confirmedPassword.setErrors(null);
            }
        }
    }

    // 表单级验证返回null，错误已绑定到控件
    return null;
}

然后修改模板中的错误判断条件，改为检查确认密码控件的错误：

<mat-error *ngIf="confirmedPassword.hasError('mismatch')">
  Passwords <strong>don't match</strong>
</mat-error>

方案二：调整模板错误显示条件 #

如果不想修改验证器，可在模板中增加判断条件，确保当FormGroup存在mismatch错误，且确认密码控件已被触摸或修改过的时候显示错误：

<mat-error *ngIf="passwordForm.errors?.['mismatch'] && (confirmedPassword.touched || confirmedPassword.dirty)">
  Passwords <strong>don't match</strong>
</mat-error>

• 若你保留了模板中的(input)事件，确保对应的onPasswordInput和onConfirmedPasswordInput方法中没有干扰表单验证逻辑的代码，比如不必要的手动重置错误。
• 两种方案都能解决你遇到的特定场景问题，方案一的错误状态更贴合控件自身，推荐使用。

内容的提问来源于stack exchange，提问作者Tony Ortega