angularjs: ng-messaggio mostra sempre

Question

Sto usando messaggi angolari per visualizzare errori di convalida del modulo sulla mia app angolare. Come per la documentazione, ho costruito il seguente codice

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

ho incluso la direttiva ngMessages nel mio javascript, così come importare il file angolare messages.js.

Sfortunatamente, questi due messaggi sono visualizzati in perpetuo. Indipendentemente da ciò che digito nel campo di input, sia esso un indirizzo email valido o meno. Entrambi i messaggi sono sempre visualizzati. Se provo a includere solo un messaggio ng, il risultato è lo stesso.

Qualche idea su cosa potrei fare male?

edit: Nel caso in cui la mia descrizione non è molto chiaro, si tratta di una stampa del risultato http://s9.postimg.org/du9230tdb/Screen_Shot_2015_06_26_at_17_09_24.png

Answer 1

Tutto sembra andare bene nel codice che stai condividendo.

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

Here is a working copy on Plunker Sto usando il tuo pezzo di codice.

Da Angularjs documentation.

Per impostazione predefinita, ngMessages visualizzerà solo un errore alla volta. Tuttavia, se si desidera visualizzare tutti i messaggi, è possibile utilizzare il flag di attributo ng-messages-multiple sull'elemento contenente la direttiva ngMessages per fare in modo che ciò accada.

Se si desidera visualizzare gli errori dopo che il campo è sporco, visitare questo link.

Assicurarsi di includere anche il modulo ngMessage e la libreria. Si prega di vedere Carlos's answer.

Grazie

Answer 2

devi assicurarsi che si sta in realtà includi ngMessage al modulo.

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

... e di aver incluso la libreria al progetto

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

Answer 3

Verificare con

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

Questo trucco mi ha salvato la giornata.