Angularjs: ng-message всегда показывает

Я использую angular -messages для отображения ошибок проверки формы в моем приложении 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>

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

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

Любая идея, что я могу делать неправильно?

edit: В случае, если мое описание не очень ясное, это печать результата http://s9.postimg.org/du9230tdb/Screen_Shot_2015_06_26_at_17_09_24.png

Ответы

Ответ 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-multiple может использоваться для элемента, содержащего директиву ngMessages, чтобы это произошло.

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

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

Спасибо

Ответ 2

Вы должны убедиться, что на самом деле вы используете ngMessage для своего модуля.

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

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

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

Ответ 3

Проверьте с помощью

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

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