Angular表单密码匹配验证异常：仅短重复密码显示不匹配错误

你遇到的问题核心逻辑是：

1. 你写的密码匹配验证器是表单组级别的，错误会挂载在整个FormGroup上，而非repeatPassword这个单独的表单控件。
2. Angular Material的mat-error默认只监听其所在mat-form-field绑定的表单控件的错误状态：
   • 当repeatPassword长度不足8位时，控件自身的minLength验证失败，处于invalid状态，此时mat-form-field会触发错误显示逻辑，你的*ngIf="form.hasError('mismatch')"才会生效；
   • 当repeatPassword长度达标后，控件自身验证通过（状态变为valid），哪怕整个表单组因密码不匹配处于invalid，mat-form-field也不会显示错误——因为它只认自身绑定控件的状态；
   • 移除minLength后，只要repeatPassword输入了内容，控件就会变为valid状态，因此mat-error直接不显示，哪怕表单组存在mismatch错误。

方案一：将验证器绑定到repeatPassword控件（推荐） #

把密码匹配逻辑改成针对repeatPassword的自定义验证器，让错误直接挂载到该控件上，完全适配mat-error的显示逻辑：

form = this.fb.group({
  username: ['', [Validators.email, Validators.required]],
  password: ['', [Validators.minLength(8), Validators.required]],
  repeatPassword: ['', [
    Validators.minLength(8), 
    Validators.required,
    // 绑定验证器，注意要保留this上下文
    this.passwordMatchValidator.bind(this)
  ]]
});

private passwordMatchValidator(control: AbstractControl): { mismatch: boolean } | null {
  // 从父表单组获取密码值
  const password = control.parent?.get('password')?.value;
  const repeatPassword = control.value;
  
  // 仅当重复密码有值时才验证匹配，避免初始状态就报错
  if (repeatPassword && password !== repeatPassword) {
    return { mismatch: true };
  }
  return null;
}

模板部分修改为监听repeatPassword控件的错误：

<mat-error *ngIf="form.get('repeatPassword')?.hasError('mismatch')">Passwords do not match</mat-error>
<mat-error *ngIf="form.get('repeatPassword')?.hasError('minlength')">Password must be at least 8 characters</mat-error>
<mat-error *ngIf="form.get('repeatPassword')?.hasError('required')">Repeat password is required</mat-error>

方案二：强制显示表单组错误（不推荐） #

如果不想调整验证器绑定方式，可以修改模板的*ngIf条件，强制在控件状态符合要求时显示表单组的错误：

<mat-error *ngIf="form.hasError('mismatch') && form.get('repeatPassword')?.touched && form.get('repeatPassword')?.valid">Passwords do not match</mat-error>

这种方式不符合Material Design的错误提示逻辑，仅作为临时 workaround 使用。

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