Angular Material表单验证问题：确认密码校验不生效

你的问题出在两个核心环节：自定义验证器逻辑颠倒，以及模板错误提示的判断条件不匹配，以下是具体修复方案：

1. 修正自定义验证器逻辑 #

当前confirmPasswordValidator的判断逻辑完全反向——密码匹配时返回错误，不匹配时反而判定为有效，直接导致表单状态异常。同时需补充空值判断，避免未填写时触发匹配验证（空值已有required规则处理）。

修改后的login-form.component.ts验证器代码：

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

  // 控件未初始化或为空时，跳过匹配验证
  if (!password || !confirmPassword || !password.value || !confirmPassword.value) {
    return null;
  }

  // 密码不匹配时返回错误，匹配时返回null（验证通过）
  return password.value !== confirmPassword.value ? { confirmPasswordMismatch: true } : null;
};

2. 修正模板中的错误提示判断 #

原模板的错误提示未关联表单的自定义验证错误，导致不显示提示信息，需按以下方式修改：

密码字段错误提示 #

原逻辑只要有值就显示提示，应改为检查pattern错误：

<mat-error *ngIf="registerForm.get('password').hasError('pattern')">
  Password must be a combination of lower-case, upper-case, numbers and at least 8 characters long
</mat-error>

（注：你的正则规则要求8位以上，原模板写的9位，此处统一修正）

确认密码字段错误提示 #

原逻辑仅判断是否有值，应改为检查表单的自定义匹配错误：

<mat-error *ngIf="registerForm.hasError('confirmPasswordMismatch')">
  Passwords do not match.
</mat-error>

补充邮箱字段错误提示（可选） #

为提升用户体验，建议给邮箱字段添加对应错误提示：

<mat-error *ngIf="registerForm.get('email').hasError('required')">This field is required</mat-error>
<mat-error *ngIf="registerForm.get('email').hasError('email')">Please enter a valid email</mat-error>

3. 可选优化：实时触发验证 #

Angular默认在控件失焦或提交时触发验证，若需要实时反馈，可在FormControl初始化时添加updateOn: 'change'：

password: new FormControl('', {
  validators: [Validators.required, Validators.pattern('^(?=.*[A-Z])(?=.*[0-9])(?=.*[a-z]).{8,}$')],
  updateOn: 'change'
}),
confirmPassword: new FormControl('', {
  validators: Validators.required,
  updateOn: 'change'
})

完成以上修改后，密码不匹配时表单会标记为无效，确认密码字段会显示错误提示，提交按钮也会正确禁用。

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