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

Tuberculin

@ostrich what was the real issue in javascript? I am experiencing the same issue. Completely lost! – Anthropomorphic

Answer 1

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

Aviation

I seriously do not understand what could be going wrong here. I have the exact same code for the form in my project as you have on Plunker (apart from the js imports which are being done locally), and yet the result is not the same. Just to make it clear, I do not want to show multiple messages simultaneously. But that's what is hapenning anyway. Here's a print of the result s9.postimg.org/du9230tdb/Screen_Shot_2015_06_26_at_17_09_24.png – Tuberculin

I can also post a print screen of my code if you like, though out of fear of having some silly typo I copy pasted the one from your plunker. Still not working. Thanks for your post though – Tuberculin

Here is what I need to figure this out. 1- Screenshot of your code. 2- Open chrome devtools and double check you don't have any errors on the console(assuming your are using Chrome :) ). I'm glad to help. Thanks – Aviation

console is clean. It was the first place I checked :( Here is a print of the code. It has a bit more code than it should be relevant, in case it helps. s1.postimg.org/tkx8dyqa7/Screen_Shot_2015_06_26_at_19_13_14.png Thanks for your help – Tuberculin

The html code is fine. Can you share the javascript code? We will find out the issue quickly, if you can share the code using Github, not sure if it's possible for you. – Aviation

Oh god. It never even crossed my mind that the problem could be javascript since all I had to do was to add the ngMessages module. Turns out I was doing it in the wrong place. Weird that it didn't raise any errors. Anyways, you've led me to the solution. You have my deepest thanks. – Tuberculin

Do not forget to add the 'ngMessage' to your app: angular.module('yourApp', ['ngMessages'])... – Udela

without including ngMessages, why does a regular input's error message work? But not the <input type="email"? – Mizuki

Answer 2

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>

Gatling

I had the same problem and your solution is exactly what I'd forgotten to check. I was following the Pluralsight course: 'AngularJS Line of Business Applications'. The course material is based on Angular 1.2 so doesn't go on to describe how to use ng-message (which is a feature of 1.3+). – Wallack

Answer 3

Check with

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

This trick saved my day.

Gerald

That will work, sure, but it's "cheating" - you aren't actually using the ng-messages functionality any more, but using ng-show to accomplish the same thing. – Kirven