如何使用Angular-material验证表单,我需要两个功能:1)如果必填字段为空,请单击“提交时显示错误消息” . 2)如果表单字段无效,请勿发送帖子请求(避免提交) . 下一个代码避免提交,但是在单击时它不显示错误消息,仅当光标离开每个输入字段时 .
<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>
1 回答
你错过了两件事 .
First: 将
type="submit"
添加到您的md-button
元素 .Second: 将
novalidate
添加到您的form
元素:您还应该考虑在
form
元素上使用ng-submit
而不是在按钮上使用ng-click
.