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-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
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
Did I miss something while migrating from
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>