如何验证 &显示错误消息 - Angular2 Material Design? [英] How to Validate & Display Error Message - Angular2 Material Design?

问题描述

我有这个输入:

<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']">价格为必填项

</表单>

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

我应该如何正确格式化错误消息?

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

当我填写一些东西时:

Angular 在其中注入了 ng-valid 类.

我想要的是类似于

解决方案

希望这会随着 angular2-material 的发展而添加，但目前模仿这一点的方法是设置dividerColor 并使用 MD-HINT 指令.例子:

<md-input placeholder="电子邮件地址"#email="ngModel"名称=电子邮件"类型=文本"全宽={真}[(ngModel)]="model.email"必需的电子邮件dividerColor="{{ !email.valid ? 'warn' : 'primary' }}"><md-hint [hidden]="email.pristine || email.valid"><span [hidden]="email.errors?.required || !email.errors?.email">这似乎不是有效的电子邮件地址.</span><span [hidden]="!email.errors?.required">电子邮件地址为必填项.</span></md-提示></md-input>

I have this input:

<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?

The ng-invalid class appears when the price input is empty:

When I fill in something:

Angular injects ng-valid class in it.

I want is to have the style similar to angular1 md design that looks like this:

解决方案

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 Material Design?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！