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

问题描述

我有需要的，如果点击提交，以显示验证错误消息的形式。

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

下面是一个工作 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

推荐答案

我发现这个小提琴的http：/ /jsfiddle.net/thomporter/ANxmv/2/ 这确实一个漂亮的把戏引起控制验证。

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

基本上它声明提交 示波器成员，并设置它真正的，当你点击提交。该模型误差结合使用这些额外的前pression显示像

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

提交＆放大器;＆安培; form.email。$ error.required

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