Question

<div class="form-group" ng-class="{'has-error': claimForm.consigneeID.$invalid && claimForm.consigneeID.$touched}">
<label class="label-bold">Consignee ID</label><br>
<input name="consigneeID" ng-model="coId" type="number" ng-maxlength="5" ng-minlength="5" class="form-control input-sm" required>
<div class="help-block" ng-messages="claimForm.consigneeID.$error" role="alert">
  <div ng-message="required">Field is required.</div>
  <div ng-message="minlength">Too few digits.</div>
  <div ng-message="maxlength">Over 5 digits.</div>         
</div>

minlength和maxlength错误显示正确的消息并正确设置＆＃34; has-error＆＃34;纳克级。但是，如果我添加＆＃34; required＆＃34;在我的字段和相应的消息，重新加载＆＃34;字段是必需的＆＃34;总是出现（直到填写）。

红色＆＃34;有错误＆＃34;但是，除非跳过不同的错误，否则不会出现类。

我在这里想念的是什么？

Answer 1

我将简要总结一下使用ng-messages时遇到的一些问题。我相信这些会回答您的问题，并有助于扩展ng-messages。

的使用范围

多封邮件

有角度的消息只允许一条消息默认只显示第一条有错误的消息。您需要告诉ng-messages允许多条消息。

将ng-messages-multiple添加到您的ng-messages指令

<div class="help-block" ng-messages-multiple 
     ng-messages="claimForm.consigneeID.$error" role="alert">

允许无效值

其他值得添加Angular的东西也不总是允许输入无效值（它会自动清除模糊区域）。

如果您想允许无效数据并显示消息，您可能需要更新输入以告知模型允许使用以下无效值：

ng-model-options="{ allowInvalid: true}"

<input name="consigneeID" ng-model="coId" 
     ng-model-options="{ allowInvalid: true}"
     type="number" 
     ng-maxlength="5" ng-minlength="5" 
     class="form-control input-sm"  required>

隐藏显示表单加载时的错误消息

如果您希望在表单加载时隐藏消息，可以使用表单字段的$touched属性。

<div class="help-block" ng-messages-multiple
         ng-show="claimForm.consigneeID.$touched"
         ng-messages="claimForm.consigneeID.$error" role="alert">

Answer 2

您可以使用ng-hide内置指令隐藏消息，并使用ng-show显示消息

在Bootstrap表单上甚至触及表单之前，AngularJS ng-messages显示错误

2 个答案: