I follow Moving from ngModel.$parsers /ng-if to ngModel.$validators /ngMessages article from Todd Motto's blog 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: Ng-if vs ng-messages at plnkr.co, 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.