我有一个表单,如果点击提交需要显示验证错误消息 .
这是一个工作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
13 回答
我找到了这个小提琴http://jsfiddle.net/thomporter/ANxmv/2/,它做了一个很好的技巧来引起控制验证 .
基本上它声明了一个范围成员
submitted
,并在您单击提交时将其设置为true . 模型错误绑定使用此额外表达式来显示错误消息UPDATE
正如在@Hafez's comment中指出的那样(给他一些赞成!),Angular 1.3+ solution简单地说:
由于我使用的是Bootstrap 3,我使用了一个指令:(见plunkr)
然后在我的HTML中:
UPDATED
在我的最新项目中,我使用 Ionic 所以我有以下内容,它自动将
.valid
或.invalid
放在input-item
上:然后在HTML中:
并在控制器中:
所以,现在,在CSS中,您可以执行以下操作:
MUCH SIMPLER!
我也有同样的问题,我通过添加一个ng-submit来解决问题,该设置将变量设置为true .
我喜欢使用$ submit的想法,我想我要将Angular升级到1.3;)
我可以想出两种方法来实现它 .
第一个是删除
novalidate
以启用浏览器的验证 .其次,当表单无效时,您可以禁用
save
按钮希望能帮助到你 .
我的解决方案有bootstrap 3
http://jsfiddle.net/rimian/epxrbzn9/
您只需要在提交表单之前检查表单是否脏且有效 . 签出以下代码 .
您还可以通过以下更改禁用提交按钮:
这应该有助于您的初始
这么多复杂的答案 .
这是我简单的方法 .
基本上,有两种方法可以解决您的问题 .
CSS方式:
当您提交表单无论表单是否有效时,Angular都会向表单元素添加
ng-submitted
类 . 我们可以使用.ng-submitted
来控制我们的元素 .例如
范围方式:
当您提交表单无论您的表单是否有效时,Angular都会将
[your form name].$submitted
设置为true .http://jsfiddle.net/LRD5x/30/一个简单的解决方案 .
HTML
JS
CSS
我最喜欢realcrowd的解决方案 .
HTML:
JavaScript的:
G45,
我遇到了同样的问题,我创建了一个指令,请在下面查看希望它可能会有所帮助
指令:
HTML:
使用angularjs的验证表单的完整解决方案 .
HTML如下 .
AngularJS应用程序和控制器如下
重要代码段
ng-app="areaApp" ng-controller="addCtrler"
定义角度应用程序和控制器
ng-show="(fareainfo.$submitted || fareainfo.name.$dirty) && fareainfo.name.$error.required"
以上条件确保每当用户第一次看到表单时,屏幕上没有任何验证错误,并且在用户对表单进行更改后,它确保在屏幕上显示验证消息 . .name. 是input元素的name属性 .
$scope.fareainfo.$valid
在上面的代码中,段会在用户提交表单时检查表单是否有效 .
$scope.fareainfo.$setSubmitted();
在上面的代码中,segment确保每当用户提交表单而不做任何事情时,所有验证消息都会显示在屏幕上 .
试试这段代码:
这个功能将验证您的结果