如何验证和显示错误消息 - Angular 2 Material 设计?
How to Validate & Display Error Message - Angular2 Material Design?
我有这个输入:
<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 class:
当我填写一些东西时:
Angular 在其中注入 ng-valid class 。
我想要的是类似于angular1 md design的样式,看起来像这样:
希望这将随着 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>
现在可以使用 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>
在全局输入时显示mat-error:
1- 导入库:
import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material/core';
2- 添加到提供商,如:
@NgModule({
providers: [
AuthService,
UserService,
{ provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
],
})
3- 重新提供应用程序。
我有这个输入:
<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 class:
当我填写一些东西时:
Angular 在其中注入 ng-valid class 。
我想要的是类似于angular1 md design的样式,看起来像这样:
希望这将随着 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>
现在可以使用 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>
在全局输入时显示mat-error:
1- 导入库:
import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material/core';
2- 添加到提供商,如:
@NgModule({
providers: [
AuthService,
UserService,
{ provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
],
})
3- 重新提供应用程序。