如何使ngMessage只显示需要的字段脏或提交表单时？

Question

我正在使用AngularJS 1.3.0 RC0和角度消息。当表单最初被加载并且原始时，ng-messages忠实地显示那些“required”字段的错误消息。因此，新加载的表单页面充满了错误消息。这不是我想要的。只有当这些字段脏或提交表单时，如何为必填字段创建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

在满足条件后仍然显示错误消息吗？在那种情况下，你是否记得在角度模块中依赖于ngMessages？例如： -

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

Answer 3

除了使用的NG-如果你认为可以做类似...

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

并在您的提交按钮添加：

ng-click="submitted=true" 

你可能想再次输入'$ scope.submitted'为false，所以你可以把它添加到你的tex中T /电子邮件输入：

ng-keyup="submitted=false" 

这种方式只提交按钮将变为“$ scope.submitted”真和一切你会做它设置为false，因此隐藏你的错误消息，直到您点击提交按钮。

Answer 4

做到这一点，最好的方法是用$感动：

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

Answer 5

只有脏：

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

我不想直到出现任何错误或用户尝试提交该页面时才显示我的消息，并且上述解决方案都不起作用。

最后我最终成功地与这样的：

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

如果你输入什么它是无效的，则显示错误

如果你尝试提交页面，你没有提供所要求的它会显示错误。

Answer 7

我发现这个答案有帮助，但它并没有解决错误信息永远悬挂的问题。我想出了一个稍微复杂的使用显示和隐藏如下：

<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隐藏，当用户纠正错误信息消失。很酷。我喜欢角度。

Answer 8

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

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

Answer 9

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

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

就是这样..

作品对我来说就像魅力。

这里是一个plunker

角的使用类是惊人的，你可以用它做这么多事情！

Answer 10

只是尝试这种

<div ng-messages='myForm.fieldName.$error && (myForm.fieldName.$dirty || myForm.$submitted)' > 
    <div ng-message='required'>Required field</div> 
</div> 

Answer 11

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

按钮类型应该是submit，这将正常工作。

Answer 12

如果您使用的是AngularJS Material，那么很多功能都是开箱即用的！请记住将所有内容都放在<md-input-container>之内。

这是codepen example所以你可以看到它的外观。这不仅会在输入被点击之前隐藏错误，还会添加一些漂亮的红色样式和动画以显示出来！

下面是实际的代码：

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