如何验证和显示错误消息 - Angular 2 Material Design？答案

【问题标题】：How to Validate & Display Error Message - Angular2 Material Design?如何验证和显示错误消息 - Angular 2 Material Design？
【发布时间】：2016-08-18 13:24:57
【问题描述】：

我有这个输入：

<form #f="ngForm" name="productForm">
     <md-input [(ngModel)]="product.price" name="price" required="true" placeholder="Price (USD)"></md-input>
     <div ng-messages="productForm.price.$error" role="alert">
         <div ng-message-exp="['required']">
              Price is required
          </div>
     </div>
</form>

但是没有显示需要价格的消息。

我应该如何正确格式化错误信息？

价格输入为空时出现ng-invalid类：

当我填写一些东西时：

Angular 在其中注入 ng-valid 类。

我想要的样式类似于angular1 md design，看起来像这样：

【问题讨论】：

标签： angular typescript material-design angular-material

【解决方案1】：

希望这将随着 angular2-material 的发展而添加，但目前模仿此的方法是设置 dividerColor 并使用 MD-HINT 指令。示例：

<md-input placeholder="Email address"
    #email="ngModel"
    name="email"
    type="text"
    fullWidth={true}
    [(ngModel)]="model.email"
    required
    email
    dividerColor="{{ !email.valid ? 'warn' : 'primary' }}">
    <md-hint [hidden]="email.pristine || email.valid">
        <span [hidden]="email.errors?.required || !email.errors?.email">
            This doesn't appear to be a valid email address.
        </span>
        <span [hidden]="!email.errors?.required">Email address is required.</span>
    </md-hint>
</md-input>

【讨论】：

打扰一下，!email.errors?.email 是什么意思？
关于官方material2 repo github.com/angular/material2/issues/348的讨论
您可能想要编辑最新版本的答案。 dividerColor 现在需要成为 md-input-container 而不是 md-input 的一部分

【解决方案2】：

现在可以使用 Angular Material 2.0.0 版以后插入验证消息。查看文档here。

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Email" [formControl]="emailFormControl">
    <mat-error *ngIf="emailFormControl.hasError('pattern')">
      Please enter a valid email address
    </mat-error>
    <mat-error *ngIf="emailFormControl.hasError('required')">
      Email is <strong>required</strong>
    </mat-error>
  </mat-form-field>
</form>

【讨论】：

是否可以在输入时显示错误，而不是在模糊输入字段时显示。我知道如果我模糊它然后输入它会在我输入时验证，但是否有可能让它在我第一次输入输入字段时显示错误消息？
是的@ViktorEriksson。这是。我会把它作为一个解决方案。

【解决方案3】：

在全局输入时显示 mat-error：

1- 导入库：

import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material/core';

2- 添加到提供者，例如：

@NgModule({
  providers: [
    AuthService,
    UserService,
    { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
  ],
})

3- 重新提供应用程序。

【讨论】：