单击提交时如何在md-input-container中显示突出显示错误？ [英] How to show highlight error in md-input-container when click submit?

问题描述

我更新了素材然后我更新了我的代码

I have updated material then I update my code like that

<md-input-container>
    <label>Last Name</label>
    <input name="lastName" ng-model="lastName" required>
    <div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">
      <div ng-message="required">This is required!</div>
    </div>
</md-input-container>

当我弄脏字段时，它会在输入上突出显示;但是，我想点击提交按钮并在输入上显示突出显示，即使我不弄脏所需的字段。

It will highlight on the input when I dirty the field; however, I want to click on submit button and show highlight on the input even I don't dirty that required field.

这是我的plunker
http://plnkr.co/edit/oAWaFr8OtBusRli4v8MS?p=preview
我想要的单击保存按钮，然后在输入字段上显示错误突出显示。

Here is my plunker http://plnkr.co/edit/oAWaFr8OtBusRli4v8MS?p=preview I want to click on Save button and then show error highlight on the input field.

推荐答案

您必须添加 type =submit将您的保存按钮与表单绑定，这意味着您将提交表单。

You have to add type="submit" to bind your save button with form that means you are going to submit your form.

来自您的plunkr

From your plunkr

<form name="userForm" novalidate>
  <md-input-container>
    <label>Last Name</label>
    <input name="lastName" ng-model="lastName" required>
    <div ng-messages="userForm.lastName.$error " ng-show="userForm.lastName.$dirty || userForm.$submitted" >
      <div ng-message='required'>This is required!</div>
    </div>
  </md-input-container>

  // added type="submit"
  <md-button type="submit" class="md-raised md-primary">Save</md-button>
</form>

点击保存按钮上的角度功能添加 ng-submit 到您的表单

to fire angular function on save button add ng-submit to your form

<form name="userForm" ng-submit="save()" novalidate>

更新 plunkr

这篇关于单击提交时如何在md-input-container中显示突出显示错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！