在 angularjs 中提交时显示验证错误消息 [英] show validation error messages on submit in angularjs

问题描述

我有一个表单，如果点击提交，它需要显示验证错误消息.

这是一个有效的 plunker

 
<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">名字是必需的</span>

<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">姓氏是必需的</span>

<div><input placeholder="Email" name="email" type="email" ng-model="user.email" required/><span ng-show="frmRegister.email.$dirty && frmRegister.email.$error.required">电子邮件是必需的.</span><span ng-show="frmRegister.email.$dirty && frmRegister.email.$error.email">电子邮件地址无效.</span>

<input type="submit" value="保存"/><span ng-show="registered">您现在是注册用户</span></表单>

当用户开始进行更改时，验证工作正常.但它不会显示任何错误消息如果单击提交而不输入任何内容.

有没有想过实现这一点?或者以其他方式单击提交"按钮时如何使每个输入字段 $dirty

解决方案

我发现了这个小提琴 http://jsfiddle.net/thomporter/ANxmv/2/ 它做了一个巧妙的技巧来进行控件验证.

基本上它声明了一个范围成员 submitted 并在您单击提交时将其设置为 true.模型错误绑定使用这个额外的表达式来显示错误信息，如

提交&&form.email.$error.required

<小时>

更新

正如@Hafez 的评论(给他一些赞成票！)，Angular 1.3+ 解决方案 就是:

form.$submitted &&form.email.$error.required

I have a form which need to show validation error messages if clicked submit.

Here is a working plunker

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

Validation works normally when user start making changes. But it doesn't show any error messages If clicked submit without entering anything.

Any thought of achieving this?. Or in other way how can I make each input field $dirty when clicks the Submit button

解决方案

I found this fiddle http://jsfiddle.net/thomporter/ANxmv/2/ which does a nifty trick to cause control validation.

Basically it declares a scope member submitted and sets it true when you click submit. The model error binding use this extra expression to show the error message like

submitted && form.email.$error.required

---

UPDATE

As pointed out in @Hafez's comment (give him some upvotes!), the Angular 1.3+ solution is simply:

form.$submitted && form.email.$error.required

这篇关于在 angularjs 中提交时显示验证错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！