Директива 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.Делая это, вам даже не нужно иметь нг-если.Например:

<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>

В этом случае я использую форму. $ Отправлено.Вы можете удалить это, заменить его на тронутый / грязный или как угодно.Принцип тот же.

Answer 2

Директива 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"])

Для более подробной информациисм. Справочник по API модуля AngularJS ngMessages .

Answer 3

Вы используете homeForm.requestTypeName в ng-if, и отсутствует элемент управления вводом с именем requestTypeName, я думаю, вы должны использовать homeForm.labName, как вы используете в атрибуте ng-message.

В основном, измените ng-if на ng-if="homeForm.labName.$touched"

TL; DR;

Вы также можете использовать homeForm.labName.$error.required для проверки, действительно ли конечный пользователь пропустил это поле, не вводянекоторый вход.

Источник: https://docs.angularjs.org/api/ng/directive/ngRequired