Angular Material reactive表单:显示每个验证器的不同错误消息

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class MyComponent {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }
}

<form [formGroup]="myForm">
  <mat-form-field>
    <input matInput formControlName="email" placeholder="Email">
    <mat-error *ngIf="myForm.get('email').hasError('required')">Email is required</mat-error>
    <mat-error *ngIf="myForm.get('email').hasError('email')">Invalid email format</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput formControlName="password" placeholder="Password">
    <mat-error *ngIf="myForm.get('password').hasError('required')">Password is required</mat-error>
    <mat-error *ngIf="myForm.get('password').hasError('minlength')">Password should have at least 6 characters</mat-error>
  </mat-form-field>
</form>