angularjs: ng-message always showing

Question

I'm using angular-messages to display form validation errors on my angular app. As per the documentation, I have built the following code

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

I have included the ngMessages directive in my javascript as well as imported the angular-messages.js file.

Unfortunately, these two messages are showing perpetually. Regardless of what I type in the input field, be it a valid email or not. Both messages are always showing. If I try to only include one ng-message, the result is the same.

What could I be doing wrong?

edit: In case my description isn't very clear, this is a print of the result https://s9.postimg.cc/du9230tdb/Screen_Shot_2015_06_26_at_17_09_24.png

Answer 1

You gotta make sure you are actually including ngMessage to your module.

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

... and that you included the library to your project

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

Answer 2

Everything seems to be fine in the code you're sharing.

<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 I'm using your piece of code.

From Angularjs documentation.

By default, ngMessages will only display one error at a time. However, if you wish to display all messages then the ng-messages-multiple attribute flag can be used on the element containing the ngMessages directive to make this happen.

If you want to show the errors after the field is dirty, please visit this link.

Make sure you are including ngMessage module and the library as well. Please see Carlos's answer.

Thanks