Angular Material 2 - 处理多个验证错误消息答案

【问题标题】：Angular Material 2 - handling multiple validation error messagesAngular Material 2 - 处理多个验证错误消息
【发布时间】：2017-09-28 08:43:58
【问题描述】：

我正在使用 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。

【问题讨论】：

标签： angular angular-material2

【解决方案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>

【讨论】：

formControl 不能与模板驱动的表单一起使用，但如果我将 [formControl]="emailFormControl" 更改为 #emailFormControl="ngModel" 它似乎正在工作。我仍然需要解决一次只显示一条消息的问题
一次显示一个现在可以用 css 解决： md-error:not(:first-of-type) { display: none; }

【解决方案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)]),  
  });
}

【讨论】：