Angular Material 顯示兩條錯誤信息

Question

我正在使用角材料和反應形式。 我希望當錯誤消息顯示時，只顯示一條消息，如果我解決了一個錯誤，則顯示另一個。

現在的情況：

HTML：

<mat-form-field class="example-full-width">
  <input matInput
         placeholder="Username"
         name="username"
         [formControlName]="'username'">
  <mat-error *ngIf="form.controls['username'].errors && form.controls['username'].touched">
    <div *ngIf="form.controls['username'].errors.required">
      Username is <strong>required</strong>
    </div>
    <div *ngIf="form.controls['username'].errors.minlength">
      Required length: {{form.controls['username'].errors.minlength['requiredLength']}}
      Actual length:{{form.controls['username'].errors.minlength['actualLength']}}
    </div>
    <div *ngIf="form.controls['username'].errors.pattern">
      Only a-zA-Z0-9
    </div>

  </mat-error>

</mat-form-field>

也許我應該使用 if else 或其他東西？ 你怎么看？

Answer 1

您可以通過一個<mat-error>檢查控件是否invalid ，然后獲取相應的錯誤消息，即：

<mat-error *ngIf="form.controls['username'].invalid">{{ getErrorMessage() }}</mat-error>

然后在您的.ts您將有一個函數來檢索適當的錯誤消息：

getErrorMessage() {
    return this.form.controls['username'].hasError('required') ? 'You must enter a value' :
        this.form.controls['username'].hasError('pattern') ? 'Not a valid username' :
        this.form.controls['username'].hasError('minlength') ? 'Required length is at least 3 characters' :
           '';
  }

您不需要那些divs ，如果您應用了適當的樣式， <mat-error>元素就足夠了。

這是一個stackblitz 示例。

Answer 2

遇到了同樣的問題。 這就是我想出的，簡單而優雅。 當有兩個或更多時，不會同時顯示mat-error 。 然而，整個表單將無效，無法提交。

mat-error + mat-error {
  display: none;
}

Answer 3

你快到了。 要一次顯示一個不同的錯誤消息，只需檢查其他錯誤（如果存在）。

<mat-error *ngIf="form.controls['username'].errors && form.controls['username'].touched">
  <div *ngIf="form.controls['username'].errors.required &&
    !form.controls['username'].errors.pattern 
    && form.controls['username'].errors.minlength">
    Username is <strong>required</strong> //this is the first message error
  </div>
  <div *ngIf="form.controls['username'].errors.minlength &&
        !form.controls['username'].errors.required &&
        !form.controls['username'].errors.pattern"> // display error if required and pattern errors don't exist Required length: {{form.controls['username'].errors.minlength['requiredLength']}}
    Actual length:{{form.controls['username'].errors.minlength['actualLength']}}
  </div>
  <div *ngIf="form.controls['username'].errors.pattern &&
                     !form.controls['username'].errors.required &&
                     !form.controls['username'].errors.minlength
                 ">
    Only a-zA-Z0-9
  </div>
</mat-error>

基本上只是否定! 所有其他錯誤消息。 這對我有用。

希望這會有所幫助。