我有一个表单,如果单击“提交”,则需要显示验证错误消息。
这是一个工作plunker http://plnkr.co/edit/nYPzEO8d3SKuFk4KBn1o?p=preview
<form name="frmRegister" ng-submit="register();" novalidate>
<div>
<input placeholder="First Name" name="first_name" type="text" ng-model="user.firstName" required />
<span ng-show="frmRegister.first_name.$dirty && frmRegister.first_name.$error.required">First Name is required</span>
</div>
<div>
<input placeholder="Last Name" name="last_name" type="text" ng-model="user.lastName" required />
<span ng-show="frmRegister.last_name.$dirty && frmRegister.last_name.$error.required">Last Name is required</span>
</div>
<div>
<input placeholder="Email" name="email" type="email" ng-model="user.email" required />
<span ng-show="frmRegister.email.$dirty && frmRegister.email.$error.required">Email is required.</span>
<span ng-show="frmRegister.email.$dirty && frmRegister.email.$error.email">Invalid Email address.</span>
</div>
<input type="submit" value="Save" />
<span ng-show="registered">YOU ARE NOW REGISTERED USER</span>
</form>
当用户开始进行更改时,验证正常进行。但如果单击“提交”而不输入任何内容,它不会显示任何错误消息。
有想过实现这个目标吗?或者以其他方式,当单击“提交”按钮时,如何使每个输入字段 $dirty
我找到了这个小提琴http://jsfiddle.net/thomporter/ANxmv/2/ http://jsfiddle.net/thomporter/ANxmv/2/它做了一个漂亮的技巧来引起控制验证。
基本上它声明了一个范围成员submitted
并在单击“提交”时将其设置为 true。模型错误绑定使用这个额外的表达式来显示错误消息,例如
submitted && form.email.$error.required
UPDATE
正如指出的@哈菲兹的评论 https://stackoverflow.com/questions/18798375/show-validation-error-messages-on-submit-in-angularjs#comment44380864_18799099(给他一些赞成票!)Angular 1.3+ 解决方案 https://docs.angularjs.org/guide/forms#binding-to-form-and-control-state很简单:
form.$submitted && form.email.$error.required
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)