Angular响应式表单验证与Material组件样式集成实践

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

/**
 * 自定义验证器：检查两个密码字段是否匹配。
 * @param passwordControl 对比的第一个密码字段的FormControl实例。
 * @returns ValidatorFn 返回一个验证器函数。
 */
export function passwordMatchValidator(passwordControl: AbstractControl): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    // 确保两个控件都已初始化且有值
    if (!passwordControl || !control || passwordControl.value === null || control.value === null) {
      return null; // 如果控件未准备好，不执行验证
    }

    // 如果确认密码为空，且主密码有值，则不立即报错，让required验证器处理
    // 但如果主密码为空，且确认密码有值，则可能需要特殊处理，这里假设required已处理
    if (control.value === '') {
        return null; // 让required验证器处理空值
    }

    // 比较两个密码的值
    if (passwordControl.value !== control.value) {
      return { 'passwordMismatch': true }; // 设置自定义错误键
    }

    return null; // 验证通过
  };
}

// 例如：your-component.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { passwordMatchValidator } from './shared/validators/password-match.validator'; // 导入自定义验证器

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

  // 初始化密码FormControl
  password = new FormControl('', Validators.required);

  // 初始化确认密码FormControl，并应用自定义验证器
  // 注意：passwordMatchValidator(this.password) 确保确认密码验证器能访问到主密码FormControl
  confirmPassword = new FormControl('', [
    Validators.required,
    passwordMatchValidator(this.password)
  ]);

  constructor() { }

  ngOnInit(): void {
    // 监听主密码变化，当主密码改变时，强制重新验证确认密码
    this.password.valueChanges.subscribe(() => {
      this.confirmPassword.updateValueAndValidity();
    });
  }

  // 获取密码错误信息
  getPasswordErrorMessage() {
    if (this.password.hasError('required')) {
      return 'Pflichtfeld'; // 必填项
    }
    return '';
  }

  // 获取确认密码错误信息
  getConfirmPasswordErrorMessage() {
    if (this.confirmPassword.hasError('required')) {
      return 'Pflichtfeld'; // 必填项
    } else if (this.confirmPassword.hasError('passwordMismatch')) {
      return 'Passwörter stimmen nicht überein'; // 密码不匹配
    }
    return '';
  }

  // 注册方法（示例）
  register() {
    if (this.password.valid && this.confirmPassword.valid) {
      console.log('表单有效，可以提交！');
      // 执行注册逻辑
    } else {
      console.log('表单无效，请检查错误。');
      // 标记所有控件为触碰状态，显示所有错误
      this.password.markAsTouched();
      this.confirmPassword.markAsTouched();
    }
  }
}

<mat-form-field appearance="fill">
  <mat-label>Passwort</mat-label>
  <input matInput [type]="hidepwd ? 'password' : 'text'" id="passwordInput" [formControl]="password" required>
  <button mat-icon-button matSuffix (click)="hidepwd = !hidepwd" [attr.aria-label]="'Passwort anzeigen/verstecken'"
    [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>Passwort bestätigen</mat-label>
  <input matInput [type]="hidepwdrepeat ? 'password' : 'text'" id="confirmPasswordInput" [formControl]="confirmPassword" required>
  <button mat-icon-button matSuffix (click)="hidepwdrepeat = !hidepwdrepeat" [attr.aria-label]="'Passwort anzeigen/verstecken'"
    [attr.aria-pressed]="hidepwdrepeat">
    <mat-icon>{{hidepwdrepeat ? 'visibility_off' : 'visibility'}}</mat-icon>
  </button>
  <mat-error *ngIf="confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)">
    {{getConfirmPasswordErrorMessage()}}
  </mat-error>
</mat-form-field>

<button mat-raised-button color="primary" (click)="register()">Registrieren</button>