AngularJS ng-message 指令总是显示消息

Question

我正在尝试将视图中的 select 字段设置为必填。所以我的 view.html

中有以下标签

<form name="homeForm">
  <div class="form-group col-md-6 md-padding">
    <div>
        <label style="font-size: medium">Laboratory Name</label>
        <select name="labName" class="form-control" ng-model="request.labName" required>
            <option ng-repeat="lab in labList" value="{{lab.id}}">{{lab.value}}</option>
        </select>
        <div style="color:maroon" ng-messages="homeForm.labName.$error"
             ng-if="homeForm.requestTypeName.$touched">
            <div ng-message="required">This field is required</div>
        </div>
    </div>

我希望 This field is required 仅在没有数据 selected 时显示。但无论该字段是否有数据 This field is required 都会显示如下

这里有什么我遗漏的吗

Answer 1

您在 ng-if 中使用 homeForm.requestTypeName，并且没有名为 requestTypeName 的输入控件，我猜您必须像在 ng-message属性。

基本上，将 ng-if 更改为 ng-if="homeForm.labName.$touched"

TL；DR；

您也可以使用 homeForm.labName.$error.required 来检查最终用户是否实际上已经离开该字段而没有输入一些内容。

来源：https://docs.angularjs.org/api/ng/directive/ngRequired

Answer 2

您需要在输入和 ng-message 中设置相同的输入名称。这样做，你甚至不需要 ng-if。例如：

<form name="form">
  <input name="fullname" type="text" ng-model="fullname" required/>
  <div ng-messages="form.$submitted && form.fullname.$error">
    <p ng-message="required" class="help-block">This field is required</p>
  </div>
</form>

在这种情况下，我使用的是 form.$submitted。您可以删除它，将其替换为 touched/dirty 或其他任何内容。原理是一样的。

Answer 3

ng-messages 指令位于单独的库模块中，必须作为依赖项包含在内。

例子

<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-messages/angular-messages.js"></script>

JS

angular.module("app",["ngMessages"])

有关详细信息，请参阅 AngularJS ngMessages Module API Reference。

AngularJS ng-message 指令总是显示消息

AngularJS ng-message directive always showing message

javascript

angularjs

ng-messages

例子