Angular Material 2 - Handling Multiple Validation Error Messages

Question

I create a form with Angular Material 2. I use a template form, and I have an email input that has two validators (it is also required by email). In the document for the input component ( https://material.angular.io/components/component/input ) it says only:

"If the input element can have more than one error condition, the user can switch the messages that should be displayed. This can be done using CSS, ngIf or ngSwitch."

there is no example, and I cannot find anything.

This is my 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>

    ...

Both messages are currently displayed all the time. Even if I enter an invalid email address.

(CSS, ngIf ngSwitch) , CSS.

Answer 1

. . / Angular 2 GIT repo. 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>