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

Question

我正在尝试将 View 中的选择字段设置为必需。所以我的 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 都会显示如下

这里有什么我想念的吗

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.$subscribed。您可以删除它，将其替换为触摸/脏或其他。原理是一样的。