Javascript 单击提交时，如何在md输入容器中显示突出显示错误？

我已经更新了材料，然后我像那样更新了我的代码

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

姓
这是必需的！

当我弄脏字段时，它将在输入上突出显示；但是，我想单击submit按钮并在输入上显示突出显示，即使我没有弄脏那个必填字段

这是我的扑克牌

---

我想单击保存按钮，然后在输入字段上显示错误突出显示。

您必须添加

type=“submit”

以将保存按钮与表单绑定，这意味着您将提交表单

从你的枪里

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

---

更新了您必须添加

type=“submit”

以将保存按钮与表单绑定，这意味着您将提交表单

从你的枪里

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

---

更新

如下更新您的html

<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.$touched || submitted" >
      <div ng-message='required'>This is required!</div>
    </div>
  </md-input-container>

  <md-button class="md-raised md-primary" ng-click="validate()">Save</md-button>
</form>

---

PLUNK

如下更新您的html

<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.$touched || submitted" >
      <div ng-message='required'>This is required!</div>
    </div>
  </md-input-container>

  <md-button class="md-raised md-primary" ng-click="validate()">Save</md-button>
</form>

扑通