Angular 16密码匹配提示未显示及重复验证问题求助

你遇到的核心问题是：密码匹配验证器绑定在整个表单组（FormGroup）上，错误信息会存储在表单的错误对象中，而非RePassword单个控件的错误集合里，所以HTML里通过registerForm.get('RePassword').hasError('PasswordNotMatch')找不到对应错误提示。

解决方案步骤 #

1. 修改HTML中的错误判断逻辑 #

将密码不匹配的提示判断改为检查整个表单的错误，同时确保仅在RePassword被触碰后才显示提示：

<input [class.is-invalid]="(registerForm.get('RePassword').errors && registerForm.get('RePassword').touched) || (registerForm.hasError('PasswordNotMatch') && registerForm.get('RePassword').touched)" 
       type="text" class="form-control w-100"  placeholder="Repeat the Password ..." formControlName="RePassword">

<!-- 其他字段长度、必填提示保持不变 -->

<span *ngIf="registerForm.hasError('PasswordNotMatch') && registerForm.get('RePassword').touched" class="invalid-feedback invalid-message-fs">
  The entered value is not the same as the password.
</span>

2. 优化验证器逻辑（可选但推荐） #

当前验证器在密码或重复密码为空时也会触发匹配错误，优化后仅在两个字段都有值时才验证匹配，提升用户体验：

RePasswordValidators(control: FormGroup): { PasswordNotMatch: boolean } | null {
  const password = control.controls['Password'].value;
  const rePassword = control.controls['RePassword'].value;

  // 仅当两个字段均不为空时执行匹配验证
  if (password && rePassword) {
    return password === rePassword ? null : { PasswordNotMatch: true };
  }
  return null;
}

修改完成后，当密码与重复密码不匹配时，即可正确显示对应的提示信息。

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