表单控件验证消息未显示正确的消息

Question

我正在尝试根据错误类型显示两条错误消息。

1. 需要电话号码
2. 输入有效的电话号码

验证工作正常，但是即使用户输入的电话号码无效，错误消息也始终显示phone number is required。

下面是我的代码

           <mat-form-field class="example-full-width">
                <mat-label>Phone</mat-label>
                <input matInput [formControl]="phoneFormControl" [errorStateMatcher]="matcher"
                  placeholder="Ex. 555-555-1234">
                <mat-error *ngIf="phoneFormControl.hasError(<not sure>) && !emailFormControl.hasError('required')">
                  Please enter a valid phone number
                </mat-error>
                <mat-error *ngIf="emailFormControl.hasError('required')">
                  Phone number is <strong>required</strong>
                </mat-error>
              </mat-form-field>

TS文件

  phoneFormControl = new FormControl('', [
    Validators.required,
    Validators.pattern(/^[0]?[789]\d{9}$/)
  ]);

Answer 1

您的ngIf语句是错误的，您始终在检查所需的错误，但应该在检查模式错误

        <mat-error *ngIf="phoneFormControl.hasError('pattern')">
          Please enter a valid phone number
        </mat-error>