angularjs: ng-сообщение всегда отображается

Question

Я использую Angular-сообщения для отображения ошибок проверки формы в моем угловом приложении. Согласно документации, я построил следующий код

<form name="loginForm">
  <label class="item item-input">
    <input type="email" placeholder="Email" ng-model="data.email" name="email" required>
  </label>
  <div ng-messages="loginForm.email.$error" style="color:maroon">
    <div ng-message="required">Please input a valid e-mail address</div>
    <div ng-message="email">You did not enter your email address correctly...</div>
  </div>
</form>

Я включил в свой javascript директиву ngMessages, а также импортировал файл angular-messages.js.

К сожалению, эти два сообщения отображаются постоянно. Независимо от того, что я ввожу в поле ввода, будь это действительный адрес электронной почты или нет. Оба сообщения всегда отображаются. Если я попытаюсь включить только одно сообщение ng, результат будет таким же.

Что я могу делать не так?

редактировать: в случае, если мое описание не очень ясно, это печать результата https://s9.postimg.cc/du9230tdb/Screen_Shot_2015_06_26_at_17_09_24.png

Answer 1

Кажется, все хорошо в коде, которым вы делитесь.

<form name="loginForm">
    <label class="item item-input">
        <input type="email" placeholder="Email" ng-model="data.email" name="email" required>
    </label>
    <div ng-messages="loginForm.email.$error" style="color:maroon">
        <div ng-message="required">Please input a valid e-mail address</div>
        <div ng-message="email">You did not enter your email address correctly...</div>
    </div>
</form>

Вот рабочая копия на Plunker, я использую ваш кусок кода.

Из документации Angularjs.

По умолчанию ngMessages будет отображать только одну ошибку за раз. Однако, если вы хотите отобразить все сообщения, для этого можно использовать флаг атрибута ng-messages-множественный для элемента, содержащего директиву ngMessages.

Если вы хотите показать ошибки после заполнения поля, перейдите по этой ссылке.

Убедитесь, что вы используете модуль ngMessage и библиотеку. Пожалуйста, посмотрите ответ Карлоса.

Спасибо

Answer 2

Вы должны убедиться, что вы действительно включили ngMessage в свой модуль.

var app = angular.module('app', [
    'ngMessages'
])

... и что вы включили библиотеку в свой проект

<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>

Answer 3

Проверить с

<div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$invalid && loginForm.email.$touched">
...
</div>

Этот трюк спас мой день.