使用Angular-material验证表单

Question

如何使用Angular-material验证表单，我需要两个功能： 1）当点击提交时，如果必填字段为空，请显示错误消息。 2）如果表单字段无效，则不要发送post请求（避免提交）。 下面的代码避免了提交，但在单击时不显示错误消息，只有在光标移出每个输入字段时才会显示。

 <form name="userForm">
<md-input-container>
    <input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required />
    <div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'>
      <div ng-message="required">This is required!</div>
    </div>
</md-input-container>

<md-input-container>
    <input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required />
     <div ng-messages="userForm.Password.$error">
     <div ng-message="required">This is required!</div>
     </div>
 </md-input-container>                             

 <md-input-container>
    <md-button id="registerUser" value="Register" class="md-raised md-primary" ng-click="userForm.$valid &&  vm.registerUser()" aria-label="login" ng-disabled="login.loginForm.$invalid()">
      Create
     </md-button>
</md-input-container>
 </form>

- D.B

Answer 1

你缺少两个东西。

第一个：在你的md-button元素中添加type="submit"属性。

第二个：在你的form元素中添加novalidate属性：

请注意，novalidate用于禁用浏览器的本地表单验证。

你还应该考虑在form元素上使用ng-submit而不是在按钮上使用ng-click。

<form name="userForm" novalidate ng-submit="userForm.$valid &&  vm.registerUser()">
    <md-input-container>
        <input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required />
        <div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'>
            <div ng-message="required">This is required!</div>
        </div>
    </md-input-container>

    <md-input-container>
        <input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required />
        <div ng-messages="userForm.Password.$error">
            <div ng-message="required">This is required!</div>
        </div>
    </md-input-container>                             

    <md-input-container>
        <md-button type="submit" id="registerUser" value="Register" class="md-raised md-primary" aria-label="login" ng-disabled="login.loginForm.$invalid()">
            Create
        </md-button>
    </md-input-container>
</form>

- John Smith

---

谢谢，约翰。它完美地工作了。还有一件事，你知道怎么让错误消息在我开始输入时隐藏/清除吗？ - D.B

尝试直接将 ngMessages 添加到您的模块中。 - John Smith