Angular表单深度指南：解决验证错误与Material组件样式问题

import { AbstractControl, ValidatorFn } from '@angular/forms';

/**
 * 自定义验证器：检查FormGroup中的密码和确认密码是否匹配。
 * 如果不匹配，则在confirmPassword控件上设置'mismatch'错误。
 */
export const passwordMatchValidator: ValidatorFn = (control: AbstractControl): { [key: string]: boolean } | null => {
  const password = control.get('password');
  const confirmPassword = control.get('confirmPassword');

  // 如果任何一个控件不存在，则不进行验证
  if (!password || !confirmPassword) {
    return null;
  }

  // 如果确认密码已经有mismatch错误，但现在值匹配了，则清除mismatch错误
  if (confirmPassword.errors && confirmPassword.errors['mismatch'] && password.value === confirmPassword.value) {
    confirmPassword.setErrors(null);
    return null;
  }

  // 如果密码不匹配，则在确认密码控件上设置mismatch错误
  if (password.value !== confirmPassword.value) {
    confirmPassword.setErrors({ mismatch: true });
    return { mismatch: true }; // 返回一个错误对象，表示FormGroup整体也有错误
  } else {
    // 如果密码匹配，确保清除确认密码控件上的mismatch错误
    confirmPassword.setErrors(null);
  }
  return null; // 验证通过
};

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, AbstractControl, ValidatorFn } from '@angular/forms';

// 引入上面定义的自定义验证器
import { passwordMatchValidator } from './password-match.validator'; // 假设你将验证器放在单独的文件中

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

  registrationForm!: FormGroup;

  ngOnInit() {
    this.registrationForm = new FormGroup({
      password: new FormControl('', [Validators.required]),
      confirmPassword: new FormControl('', [Validators.required])
    }, { validators: passwordMatchValidator }); // 将自定义验证器应用到 FormGroup

    // 监听密码字段变化，强制重新验证确认密码字段，以确保跨字段验证的及时性
    this.registrationForm.get('password')?.valueChanges.subscribe(() => {
      this.registrationForm.get('confirmPassword')?.updateValueAndValidity();
    });
  }

  // 方便在模板中获取FormControl实例
  get password() {
    return this.registrationForm.get('password') as FormControl;
  }

  get confirmPassword() {
    return this.registrationForm.get('confirmPassword') as FormControl;
  }

  getPasswordErrorMessage() {
    if (this.password.hasError('required')) {
      return '密码为必填项';
    }
    return '';
  }

  getConfirmPasswordErrorMessage() {
    if (this.confirmPassword.hasError('required')) {
      return '确认密码为必填项';
    }
    // 检查自定义的mismatch错误
    if (this.confirmPassword.hasError('mismatch')) {
      return '两次输入的密码不一致';
    }
    return '';
  }

  register() {
    // 触发表单验证，显示所有错误，即使控件未被触碰或修改
    this.registrationForm.markAllAsTouched();
    if (this.registrationForm.valid) {
      console.log('表单提交成功!', this.registrationForm.value);
      // 处理注册逻辑
    } else {
      console.log('表单验证失败');
    }
  }
}

<form [formGroup]="registrationForm" (ngSubmit)="register()">
  <mat-form-field appearance="fill">
    <mat-label>密码</mat-label>
    <!-- 使用 formControlName 绑定到 FormGroup 中的控件 -->
    <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>
    <!-- 当 confirmPassword 变为 invalid 且被触碰或修改时显示错误 -->
    <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>