如何使ngMessage的必填字段只显示脏或提交表单?

我正在使用AngularJS 1.3.0 RC0和angular度消息。 当最初加载表单并且原始的时候,ng-messages忠实地显示那些“required”字段的错误信息。 所以新加载的表单页面充满了错误信息。 这不是我想要的。 只有当这些字段脏或提交表单时,如何使ngMessage显示必填字段?

我已经看过官方文件了,不知道。 并试图把ng-message div中的“ng-show =”fieldName。$ dirty“”,不起作用。 任何帮助将不胜感激!

使用ng-if属性在含有ng-messages的标签上检查$dirty

例如:

 <div ng-messages='myForm.myControl.$error' ng-if='myForm.myControl.$dirty'> <div ng-message='required'>Required field</div> </div> 

做到这一点的最好方法是$ touch:

 <div class="help-block" ng-messages="userForm.name.$error" ng-show="userForm.name.$touched"> ... </div> 

只有肮脏:

 <div ng-messages="myForm.myField.$dirty && myForm.myField.$error"> <div ng-message='required'>Required field</div> </div> 

只有在提交表格的情况下:

 <div ng-messages="myForm.$submitted && myForm.myField.$error"> <div ng-message='required'>Required field</div> </div> 

而不是使用ng-ifbuild议你可以做一些像…

 <div ng-messages='myForm.myControl.$error' ng-if='submitted'> <div ng-message='required'>Required field</div> </div> 

然后在你的提交button上添加:

 ng-click="submitted=true" 

你可能想再次键入'$ scope.submitted'时重新inputfalse,所以你可以把它添加到你的文本/电子邮件input中:

 ng-keyup="submitted=false" 

这样,只有提交button将“$ scope.submitted”更改为true,并且您所做的一切都将其设置为false,因此隐藏了错误消息,直到您单击“提交”button。

我不想显示我的消息,直到有任何错误或用户尝试提交页面,并没有上述解决scheme的工作。

最后我终于成功了这个:

 <form name='frmUser'> .......... .......... <div ng-messages="frmUser.firstName.$error" ng-show='frmUser.$submitted || frmUser.firstName.$dirty' role="alert"> <div ng-message="required" class="err">Required</div> <div ng-message="maxlength" class="err">Maximum 50 characters.</div> </div> <input ng-model="model.first" name="firstName" type="text" ng-required="true" ng-maxlength="50" placeholder="Enter your first name" /> </form> 

如果input任何无效的内容,则显示错误

如果您尝试提交页面,而您没有提供必填字段,则会显示错误。

在满足条件后错误信息是否仍然出现? 在这种情况下,你是否记得在angular度模块中依赖ngMessages ? 例如:

 angular.module("exampleModule", ["ngMessages"]); 

我发现这个答案很有帮助,但并没有解决错误信息永远悬挂的问题。 我想出了一个比较复杂的show和hide的用法,如下所示:

 <div class="help-block" ng-messages="addPlanForm.planName.$error" ng-show="addPlanForm.$submitted || addPlanForm.planName.$dirty || (addPlanForm.planName.$invalid && addPlanForm.planName.$touched)"> <p ng-message="required" ng-hide="addPlanForm.planName.$valid">Your name is required.</p> </div> 

通过在发生错误时生成的消息添加ng-hide,当用户纠正错误时,消息将消失。 方式很酷。 我喜欢angular度。

我一直在努力,发生了什么是我的NG消息没有出现,因为默认的浏览器行为不允许无效的表单提交ng-required =“true”。 要解决这个问题,你可以用novalidation来修饰表单。 这里是我的完整工作示例:

 <form name="myForm" novalidate ng-submit="myForm.$valid && controllSideSubmitHandle()"> <input type="text" name="name" ng-model="myScope.name" ng-required="true"> <div ng-messages="myForm.$error || myForm.$submitted" style="color:maroon" role="alert" ng-if="myForm.name.$dirty || myForm.$submitted"> <div ng-message="required">Name is required.</div> </div> <input type="submit" value="Submit"/> </form> 

我用css规则解决了这个问题

 [ng-messages] { display: none; color:red; } .ng-dirty [ng-messages] { display:block } 

而已..

对我来说就像一个魅力。

这是一个暴徒

Angular使用类是惊人的,你可以用它做很多事情!

试试这个

 <div ng-messages='myForm.fieldName.$error && (myForm.fieldName.$dirty || myForm.$submitted)' > <div ng-message='required'>Required field</div> </div> 
 <input required type="text" ng-model="model" name="field" ng-maxlength="13" ng-minlength="10"> <div ng-messages="form.field.$error" ng-if='form.$submitted'> <p ng-message="required">Required</p> <p ng-message="maxlength">not a valid field. Length exceeds.</p> <p ng-message="minlength">not a valid field. Length is shorter.</p> </div> 

buttontypes应submit ,这将工作。

如果您使用的是AngularJS Material,那么很多这种function都是开箱即用的! 只要记住将所有内容放在<md-input-container>

这是一个codepen的例子,所以你可以看到它的外观。 这不仅在input被点击之前隐藏了错误,还会添加一些漂亮的红色样式和animation,当它显示出来时!

这是实际的代码:

  <form name="books" novalidate> <md-input-container> <input ng-model="title" name="title" required/> <div ng-messages="books.title.$error"> <div ng-message="required">Title is required</div> </div> </md-input-container> </form>