AngularJS ng-message指令始终显示消息

Question

我试图在视图中设置选择字段为必需。 所以我的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 。 但是无论该字段是否有数据， This field is required ，如下所示

这里有我想念的东西吗

Answer 1

您需要在输入和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 2

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

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

TL; DR;

您也可以使用homeForm.labName.$error.required来检查最终用户是否实际上在没有输入任何输入的情况下就通过了该字段。

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

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模块API参考》 。