Angular表单密码匹配错误不显示及Material按钮样式异常求助

Angular没有内置的密码匹配验证器，得自己实现自定义验证逻辑，按以下步骤调整：

1. 编写密码匹配验证器函数

passwordMatchValidator(formGroup: FormGroup): ValidationErrors | null {
  const password = formGroup.get('password')?.value;
  const confirmPassword = formGroup.get('confirmPassword')?.value;
  return password === confirmPassword ? null : { passwordMismatch: true };
}

2. 在构建表单组时，将验证器绑定到整个表单（或单独给confirmPassword控件添加）

this.signupForm = this.fb.group({
  password: ['', Validators.required],
  confirmPassword: ['', Validators.required]
}, { validators: this.passwordMatchValidator });

3. 修改getConfirmPasswordErrorMessage函数，增加对passwordMismatch错误的判断

getConfirmPasswordErrorMessage(): string {
  const confirmPassword = this.signupForm.get('confirmPassword');
  if (confirmPassword?.hasError('required')) {
    return 'Pflichtfeld';
  }
  if (this.signupForm.hasError('passwordMismatch')) {
    return '密码不匹配';
  }
  return '';
}

4. 模板中确保错误提示条件包含表单的passwordMismatch错误：

<mat-error *ngIf="confirmPassword.invalid || signupForm.hasError('passwordMismatch')">
  {{ getConfirmPasswordErrorMessage() }}
</mat-error>

绑定(input)事件到按钮上无效，应该把事件绑定到密码输入框触发匹配检查，样式异常大概率是以下原因：

1. 确认模块已导入MatButtonModule
   在组件所属模块中必须导入Material按钮模块：

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    // ...其他依赖模块
    MatButtonModule
  ]
})
export class YourComponentModule { }

2. 检查按钮disabled状态绑定
   如果按钮绑定了[disabled]="signupForm.invalid"，表单验证不通过时按钮会自动变灰，这是Material默认样式，不属于异常。若不需要该逻辑，直接移除绑定即可。

3. 排查自定义CSS冲突
   检查全局或组件CSS中是否存在覆盖Material默认样式的代码，比如：

/* 这类自定义样式会干扰Material按钮默认样式 */
.mat-raised-button {
  background-color: #ccc !important;
}

如有此类代码，要么删除，要么调整选择器优先级避免冲突。

4. 修正事件绑定位置
   把checkPasswordMatch()绑定到密码和确认密码输入框的(input)事件：

<input matInput formControlName="password" (input)="checkPasswordMatch()">
<input matInput formControlName="confirmPassword" (input)="checkPasswordMatch()">

<button mat-raised-button type="submit" [disabled]="signupForm.invalid">提交</button>

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