Angular 响应式表单错误处理与 Material UI 组件样式集成指南

// src/app/validators/password-match.validator.ts
import { AbstractControl, ValidatorFn, ValidationErrors } from '@angular/forms';

/**
 * 自定义验证器：检查密码和确认密码是否匹配。
 * 应用于 FormGroup，而不是单个 FormControl。
 * @param control AbstractControl，通常是 FormGroup
 * @returns 如果不匹配则返回 { mismatch: true }，否则返回 null
 */
export const passwordMatchValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  const password = control.get('password');
  const confirmPassword = control.get('confirmPassword');

  // 如果控件不存在或未初始化，则不进行验证
  if (!password || !confirmPassword) {
    return null;
  }

  // 如果确认密码控件本身有其他错误（如required），则不覆盖这些错误
  // 仅在确认密码通过了其他验证且值不匹配时才设置 'mismatch' 错误
  if (confirmPassword.errors && !confirmPassword.errors['mismatch']) {
      return null;
  }

  // 比较密码值
  return password.value === confirmPassword.value ? null : { mismatch: true };
};

// src/app/my-form/my-form.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { passwordMatchValidator } from '../validators/password-match.validator'; // 导入自定义验证器

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;
  hidepwd = true;
  hidepwdrepeat = true;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.myForm = this.fb.group({
      password: ['', [Validators.required, Validators.minLength(6)]],
      confirmPassword: ['', Validators.required]
    }, { validators: passwordMatchValidator }); // 将自定义验证器应用于 FormGroup
  }

  // 便捷访问表单控件
  get password() {
    return this.myForm.get('password');
  }

  get confirmPassword() {
    return this.myForm.get('confirmPassword');
  }

  getPasswordErrorMessage(): string {
    if (this.password.hasError('required')) {
      return '密码是必填项';
    }
    if (this.password.hasError('minlength')) {
      return '密码至少需要6个字符';
    }
    return '';
  }

  getConfirmPasswordErrorMessage(): string {
    if (this.confirmPassword.hasError('required')) {
      return '确认密码是必填项';
    }
    // 检查 FormGroup 上设置的 'mismatch' 错误
    // 确保仅在确认密码被修改或触碰后显示此错误
    if (this.myForm.hasError('mismatch') && (this.confirmPassword.dirty || this.confirmPassword.touched)) {
      return '两次输入的密码不一致';
    }
    return '';
  }

  register(): void {
    if (this.myForm.valid) {
      console.log('表单有效，提交数据:', this.myForm.value);
      // 执行注册逻辑
    } else {
      console.log('表单无效，请检查输入！');
      // 标记所有控件为触碰状态，以便显示所有错误
      this.myForm.markAllAsTouched();
    }
  }
}

<!-- src/app/my-form/my-form.component.html -->
<form [formGroup]="myForm" (ngSubmit)="register()">
  <mat-form-field appearance="fill">
    <mat-label>密码</mat-label>
    <input matInput [type]="hidepwd ? 'password' : 'text'" formControlName="password" required>
    <button mat-icon-button matSuffix (click)="hidepwd = !hidepwd" [attr.aria-label]="'显示/隐藏密码'"
      [attr.aria-pressed]="hidepwd">
      <mat-icon>{{hidepwd ? 'visibility_off' : 'visibility'}}</mat-icon>
    </button>
    <mat-error *ngIf="password.invalid && (password.dirty || password.touched)">
      {{getPasswordErrorMessage()}}
    </mat-error>
  </mat-form-field>
  <br>
  <mat-form-field appearance="fill">
    <mat-label>确认密码</mat-label>
    <input matInput [type]="hidepwdrepeat ? 'password' : 'text'" formControlName="confirmPassword" required>
    <button mat-icon-button matSuffix (click)="hidepwdrepeat = !hidepwdrepeat" [attr.aria-label]="'显示/隐藏密码'"
      [attr.aria-pressed]="hidepwdrepeat">
      <mat-icon>{{hidepwdrepeat ? 'visibility_off' : 'visibility'}}</mat-icon>
    </button>
    <!-- mat-error 依然检查 confirmPassword.invalid，因为当 FormGroup 有 mismatch 错误时，
         confirmPassword 控件也会被标记为 invalid (通过 setErrors 方法在内部实现) -->
    <mat-error *ngIf="confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)">
      {{getConfirmPasswordErrorMessage()}}
    </mat-error>
  </mat-form-field>

  <button mat-raised-button color="primary" type="submit">注册</button>
</form>

// src/app/app.module.ts (或您的特性模块)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms'; // 响应式表单所需

// Angular Material 组件模块导入
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button'; // 确保导入此模块！

import { AppComponent } from './app.component';
import { MyFormComponent } from './my-form/my-form.component'; // 您的表单组件

@NgModule({
  declarations: [
    AppComponent,
    MyFormComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule, // 导入响应式表单模块
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    MatButtonModule // 关键：导入 MatButtonModule 以启用 Material 按钮样式
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }