Angular Material 2 - 處理多個驗證錯誤消息

Question

我正在使用Angular Material 2創建一個表單。我使用模板驅動的表單，我有電子郵件輸入，有兩個驗證器（必需和電子郵件）。 在輸入組件的文檔（ https://material.angular.io/components/component/input ）中，它只說：

“如果輸入元素可以有多個錯誤狀態，則由消費者決定應該顯示哪些消息。這可以通過CSS，ngIf或ngSwitch來完成。”

沒有例子，我無法在任何地方找到它。

這是我的HTML：

...
<form (ngSubmit)="onSubmit(registrationForm)" #registrationForm="ngForm">
    ...

    <md-input-container floatPlaceholder="never">
      <input mdInput type="email" placeholder="Enter your email address" name="email" [(ngModel)]="email" required email>
      <md-error class="required">Email is required.</md-error>
      <md-error class="email">Invalid email.</md-error>
    </md-input-container>

    ...

目前，這兩條消息始終顯示。 即使我輸入了一些無效的電子郵件。

任何提到的解決方案（CSS，ngIf或ngSwitch）都可以，但我更喜歡CSS。

Answer 1

見下面的例子。 獲得工作示例的一個好方法是查看/搜索Angular 2 Material GIT倉庫。 以下示例來自https://github.com/angular/material2/blob/master/src/demo-app/input/input-demo.html

      <md-input-container>
        <input mdInput placeholder="email" [formControl]="emailFormControl">
        <md-error *ngIf="emailFormControl.hasError('required')">
          This field is required
        </md-error>
        <md-error *ngIf="emailFormControl.hasError('pattern')">
          Please enter a valid email address
        </md-error>
      </md-input-container>

Answer 2

這就是我在Angular 6中實現它的方法（ ReactiveFormsModule ）

HTML

<form [formGroup]="service.form" class="normal-form">
 <mat-grid-list cols="2" rowHeight="300px">
    <mat-grid-tile>
    <input type="hidden" formControlName="$key">
      <div class="controles-container">
          <mat-form-field>
            <input formControlName="mobile" matInput placeholder="Mobile*">
            <mat-error *ngIf="service.form.controls['mobile'].errors?.required">This field is mandatory.</mat-error>
            <mat-error *ngIf="service.form.controls['mobile'].errors?.minlength">Minimum 8 charactors needed.</mat-error>
        </mat-form-field>      
      </div>
    </mat-grid-tile>
</mat-grid-list>
</form> 

Component.ts

export class MyComponent implements OnInit {

  constructor(public service :EmployeeService) { }

  ngOnInit() {
  }

  onClear() {
    this.service.form.reset();

  }
}

服務

export class EmployeeService {

  constructor() { }

  form :FormGroup = new FormGroup({
    $key :new FormControl(null),
    mobile:new FormControl('',[Validators.required,Validators.minLength(10)]),  
  });
}