我有一个表格,如果单击“提交”,则需要显示验证错误消息。
这是一个工作的家伙
<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/上找到了这个小提琴,它巧妙地进行了控件验证。
基本上,它声明一个作用域成员,submitted并在单击“提交”时将其设置为true。模型错误绑定使用此额外的表达式来显示错误消息,例如
submitted
submitted && form.email.$error.required
更新
正如@Hafez 的评论中所指出的(给他一些赞!),Angular1.3+解决方案很简单:
form.$submitted && form.email.$error.required