Question:

I follow <a href="http://toddmotto.com/moving-from-ng-model-parsers-to-ng-model-validates-ng-messages/" rel="nofollow" title="Moving from ngModel.$parsers /ng-if to ngModel.$validators /ngMessages">Moving from ngModel.$parsers /ng-if to ngModel.$validators /ngMessages</a> article from <a href="http://toddmotto.com/" rel="nofollow" title="Todd Motto's blog">Todd Motto's blog</a> and I want to migrate from ng-if to ng-messages. But ng-messages directive behaves very weird when I try to display to user two different messages for <input type="email">: first, when user leave field empty (then required error occurs) and second, when format is wrong (then email error occurs) - it displays both required and mail messages, but my old code displays only one message - about required error - and that is I think welcomed behavior. Here is simplified code:

<form name="ngMessageMailForm"> <input type="email" required="" name="email" ng-model="ctrl.ngMessageMail" /> <div ng-messages="ngMessageMailForm.email.$error" ng-if="ngMessageMailForm.email.$touched"> <span ng-message="email"> E-mail has not proper format<br /> </span> <span ng-message="required"> E-mail is required<br /> </span> </div> </form>

Comparison between old and new code you can find in this Plunker: <a href="http://plnkr.co/edit/Nr5Z6l4J3tPuefd5NigW?p=preview" rel="nofollow" title="Ng-if vs ng-messages at plnkr.co">Ng-if vs ng-messages at plnkr.co</a>, to reproduce weird behavior of ng-message click inside and then outside of mail inputs. You will see one message in case of ng-if form, and two messages in case of ng-message form. Did I miss something while migrating from ng-if to ng-messages? Thank you in advance for any help.

Everything is fine but you miss to add <a href="https://docs.angularjs.org/api/ngMessages/directive/ngMessages" rel="nofollow">angular-messages</a> library to your project...

Add its files to your project and inject ngMessages to your angularjs module then you are good to go...

<a href="http://plnkr.co/edit/LhkMHRGiTBxVdeYLnkbs?p=preview" rel="nofollow">here is update plunker</a>