如何验证和显示错误消息 – Angular2材料设计？

发布时间：2020-12-17 10:22:07 所属栏目：安全来源：网络整理

导读：我有这个输入： 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'

我有这个输入：

<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的样式,如下所示：

希望这将添加为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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!