如何使必填字段的ngMessage仅在脏或提交表单时显示？

Question

我正在使用AngularJS 1.3.0 RC0和angular-messages.当表单最初加载和原始时,ng-messages尽职尽责地显示那些"必需"字段的错误消息.因此,新加载的表单页面将填充错误消息.这不是我想要的.如何使必填字段的ngMessage仅在这些字段变脏或提交表单时显示？

我已经阅读了官方文档,没有任何线索.并尝试在ng-messages div中放置"ng-show ="fieldName.$ dirty"",但是没有用.任何帮助将非常感谢!

Answer 1

使用该ng-if属性检查具有$dirty的标记ng-messages.

示例:

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

Answer 2

最好的方法是触及$:

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

Answer 3

只有在脏的时候:

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

Answer 4

而不是使用ng-if建议你可以做类似......

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

在提交按钮上添加:

ng-click="submitted=true"

当您再次输入时,您可能希望将'$ scope.submitted'更改回false,因此您可以将其添加到文本/电子邮件输入中:

ng-keyup="submitted=false"

这样只有提交按钮会将'$ scope.submitted'更改为true,而您执行的其他操作都会将其设置为false,因此会隐藏您的错误消息,直到您单击提交按钮.

Answer 5

我不希望在出现任何错误或用户试图提交页面之前显示我的消息,并且上述解决方案均无效.

最后我成功地完成了这个:

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

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

如果您尝试提交页面但未提供必填字段,则会显示错误.