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

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>

最小长度和最大长度错误显示正确的消息并正确设置 "has-error" ng-class。但是，如果我将 "required" 添加到我的字段和相应的消息中，则在重新加载时 "Field is required" 总是出现（直到填写）。

不过，红色 "has error" class 不会出现，除非出现其他错误。

我错过了什么？

Answer 1

我将总结一下我运行在使用 ng-messages 时遇到的几个问题。我相信这些将回答您的问题并有助于扩展 ng-messages.

的使用

多条消息

angular messages only allow one message 默认情况下只会显示第一条有错误的消息。您需要告诉 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 相应地显示消息

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

AngularJS ng-messages shows error before form is even touched on Bootstrap form

javascript

twitter-bootstrap

angularjs

angularjs-ng-form

ng-messages