javascript - 在angularjs中提交时显示验证错误消息

Question

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

这是一个有效的 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>

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

有没有想过实现这个目标？或者以其他方式如何在单击“提交”按钮时使每个输入字段 $dirty

Answer 1

我找到了这个 fiddle http://jsfiddle.net/thomporter/ANxmv/2/它做了一个巧妙的技巧来引起控件验证。

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

submitted && form.email.$error.required

---

更新

正如 @Hafez's comment 中指出的那样(给他一些赞成票!)，Angular 1.3+ solution很简单:

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