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

Вам нужно установить одно и то же имя входа в вашем вводе и в вашем 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 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