5 
<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。但是，如果我在我的字段和相应的消息中添加“必填”，则在重新加载时，“必填”总是出现（直到填写）。

但是，除非触发了不同的错误，否则不会出现红色的“有错误”类。

我在这里错过了什么？

4

2 回答 2

3

我将总结一下我在使用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">
于 2015-12-03T16:57:05.053 回答
1

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

于 2015-12-03T18:09:58.780 回答