Angular 形式验证：在空和不匹配的密码上显示错误

我们可以使用?. typescript安全操作符来防止访问属性时HTML中出现任何错误.需要注意的事项:

1. 我们已经在表单级别设置了mismatch验证器要验证，但我们在确认密码表单字段显示错误消息，所以我们需要通知表单控件该元素处于错误状态，为此我们可以使用errorStateMatcher输入绑定来更新表单，这将显示错误！

错误状态匹配器代码！

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(
    control: FormControl | null,
    form: FormGroupDirective | NgForm | null
  ): boolean {
    return !!(form?.errors?.['mismatch'] && control?.touched);
  }
}
...

...
export class App {
  name = 'Angular';
  registerForm: FormGroup;
  matcher = new MyErrorStateMatcher();

HTML

...
<input matInput formControlName="confirmPassword" type="password" [errorStateMatcher]="matcher"> 
...

2. 我们可以使用@switch而不是@if，因为我们通常一次显示一个错误，所以如果我们使用switch，代码就会更少

请在下面找到完整的代码和工作stackblitz以供参考！

完整代码:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import {
  AbstractControl,
  FormControl,
  FormGroup,
  NgForm,
  ReactiveFormsModule,
  Validators,
  FormGroupDirective,
} from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule } from '@angular/forms';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { CommonModule } from '@angular/common';
import { ErrorStateMatcher } from '@angular/material/core';

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(
    control: FormControl | null,
    form: FormGroupDirective | NgForm | null
  ): boolean {
    return !!(form?.errors?.['mismatch'] && control?.touched);
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MatInputModule,
    MatFormFieldModule,
    MatCheckboxModule,
    MatButtonModule,
    FormsModule,
    CommonModule,
  ],
  template: `
    <form [formGroup]="registerForm">
      <mat-form-field>
          <mat-label>Password</mat-label>
          <input matInput formControlName="password" type="password"> 
          @if (registerForm?.get('password')?.touched) {
            <mat-error>
            @switch (true) {
                @case (registerForm.get('password')?.hasError('required')) {
                  Password is required
                }
                @case (registerForm.get('password')?.hasError('minlength')) {
                  Password must be 6 characters in length
                }
            }
          </mat-error>
          }
      </mat-form-field>

      <mat-form-field>
          <mat-label>Confirm Password</mat-label>
          <input matInput formControlName="confirmPassword" type="password" [errorStateMatcher]="matcher"> 
          @if (registerForm?.get('confirmPassword')?.touched) {
            <mat-error>
            @switch (true) {
                @case (registerForm.get('confirmPassword')?.hasError('required')) {
                  Confirm Password is required
                }
                @case (registerForm.errors?.['mismatch']) {
                  Password does not match
                }
            }
          </mat-error>
          }
      </mat-form-field>


      <button mat-raised-button color="primary " type="submit" [disabled]="!registerForm.valid">Sign up</button>
</form>
  `,
})
export class App {
  name = 'Angular';
  registerForm: FormGroup;
  matcher = new MyErrorStateMatcher();

  constructor() {
    this.registerForm = new FormGroup(
      {
        password: new FormControl('', [
          Validators.required,
          Validators.minLength(6),
        ]),
        confirmPassword: new FormControl('', [Validators.required]),
      },
      { validators: this.passwordMatchValidator }
    );
  }

  private passwordMatchValidator(control: AbstractControl) {
    return control.get('password')?.value ===
      control.get('confirmPassword')?.value
      ? null
      : { mismatch: true };
  }
}

bootstrapApplication(App, {
  providers: [provideAnimationsAsync()],
});

Stackblitz Demo