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

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错误显示正确的消息并正确设置"has-error"ng-class.但是,如果我将"required"添加到我的字段和相应的消息中,则在重新加载时,"Field is required"始终显示(直到填写).

但是,除非跳过不同的错误,否则不会出现红色的"有错误"类.

我在这里想念的是什么？

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