Angular Material 表单验证与组件样式指南

// validators.ts
import { AbstractControl, FormGroup, ValidatorFn } from '@angular/forms';

export class CustomValidators {
  static passwordMatch(controlName: string, checkControlName: string): ValidatorFn {
    return (formGroup: AbstractControl): { [key: string]: any } | null => {
      const control = formGroup.get(controlName);
      const checkControl = formGroup.get(checkControlName);

      if (!control || !checkControl) {
        return null; // Controls not found, no validation
      }

      // 如果确认密码字段有值，且两个密码不匹配，则设置错误
      if (checkControl.errors && !checkControl.errors['passwordMismatch']) {
        // 如果确认密码字段已经有其他错误，且不是密码不匹配错误，则不覆盖
        return null;
      }

      if (control.value !== checkControl.value) {
        checkControl.setErrors({ passwordMismatch: true });
        return { passwordMismatch: true }; // 返回FormGroup级别的错误
      } else {
        checkControl.setErrors(null); // 清除确认密码字段的错误
        return null;
      }
    };
  }
}

// your-component.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { CustomValidators } from './validators'; // 假设 validators.ts 在同级目录

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

  constructor(private fb: FormBuilder) {}

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

    // 监听密码字段的变化，当密码改变时重新触发确认密码的验证
    this.password.valueChanges.subscribe(() => {
      this.confirmPassword.updateValueAndValidity();
    });
  }

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

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

  // 获取密码字段的错误消息
  getPasswordErrorMessage(): string {
    if (this.password.hasError('required')) {
      return '密码是必填项';
    }
    if (this.password.hasError('minlength')) {
      return `密码至少需要 ${this.password.errors?.['minlength'].requiredLength} 个字符`;
    }
    return '';
  }

  // 获取确认密码字段的错误消息
  getConfirmPasswordErrorMessage(): string {
    if (this.confirmPassword.hasError('required')) {
      return '请再次输入密码';
    }
    // 检查是否有自定义的密码不匹配错误
    if (this.confirmPassword.hasError('passwordMismatch')) {
      return '两次输入的密码不一致';
    }
    return '';
  }

  register(): void {
    if (this.registrationForm.valid) {
      console.log('表单有效，提交数据:', this.registrationForm.value);
      // 执行注册逻辑
    } else {
      console.log('表单无效，请检查错误。');
      // 触发表单所有控件的验证，以便显示错误
      this.registrationForm.markAllAsTouched();
    }
  }
}

<!-- your-component.component.html -->
<form [formGroup]="registrationForm" (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 *ngIf="confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)">
      {{getConfirmPasswordErrorMessage()}}
    </mat-error>
  </mat-form-field>

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

// 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'; // 导入 ReactiveFormsModule

// 导入 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'; // 确保导入 MatButtonModule

import { AppComponent } from './app.component';
import { YourComponent } from './your-component.component'; // 你的组件

@NgModule({
  declarations: [
    AppComponent,
    YourComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule, // 如果使用 Reactive Forms，请确保导入
    // Angular Material 模块
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    MatButtonModule // 必须导入！
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// angular.json
"styles": [
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css", // 或者你选择的其他主题
  "src/styles.css"
],

/* styles.css */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
/* 或者你自定义的主题 */