web-dev-qa-db-fra.com

angularjs: ng-message toujours affiché

J'utilise des messages angulaires pour afficher les erreurs de validation de formulaire sur mon angular. Selon la documentation, j'ai construit le code suivant

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

J'ai inclus la directive ngMessages dans mon javascript ainsi que importé le fichier angular-messages.js.

Malheureusement, ces deux messages s'affichent perpétuellement. Indépendamment de ce que je tape dans le champ de saisie, que ce soit un e-mail valide ou non. Les deux messages sont toujours affichés. Si j'essaie d'inclure un seul message ng, le résultat est le même.

Que pourrais-je faire de mal?

edit: Dans le cas où ma description n'est pas très claire, ceci est une copie du résultat https://s9.postimg.cc/du9230tdb/Screen_Shot_2015_06_26_at_17_09_24.png

angularjsng-messages
23
Paraphiliac Ostrich

Tout semble bien se passer dans le code que vous partagez.

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

Voici une copie de travail sur Plunker J'utilise votre morceau de code.

De documentation Angularjs .

Par défaut, ngMessages n'affichera qu'une seule erreur à la fois. Cependant, si vous souhaitez afficher tous les messages, l'indicateur d'attribut ng-messages-multiple peut être utilisé sur l'élément contenant la directive ngMessages pour que cela se produise.

Si vous voulez afficher les erreurs après que le champ soit sale, veuillez visiter ceci lien .

Assurez-vous que vous incluez également le module ngMessage et la bibliothèque. Veuillez voir réponse de Carlos .

Merci

9
jlulloav

Vous devez vous assurer que vous incluez réellement ngMessage dans votre module.

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

... et que vous avez inclus la bibliothèque dans votre projet

<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>
67
Carlos A. Cabrera

Vérifier avec

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

Cette astuce m'a sauvé la journée.

2
Kumar Immanuel