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>