本文介绍了如何验证和显示错误消息-Angular2材料设计?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这个输入:
<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>
但是没有显示价格必填信息.
But the message Price is required doesn't show up.
我应该如何正确设置错误消息的格式?
How should I properly format the error message?
当价格输入为空时,将显示ng-invalid类:
The ng-invalid class appears when the price input is empty:
当我填写内容时:
Angular在其中注入ng-valid类.
Angular injects ng-valid class in it.
我想要的样式类似于 angular1 md设计 :
I want is to have the style similar to angular1 md design that looks like this:
推荐答案
希望这是随着angular2-material的发展而添加的,但是目前模仿此方法的方法是设置dividerColor并使用MD-HINT指令.例如:
Hopefully this will be added as angular2-material evolves, but currently the way to mimic this is to set the dividerColor and use the MD-HINT directive. example:
<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>
这篇关于如何验证和显示错误消息-Angular2材料设计?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!