Nouveauté de la version 1.3.0 d’AngularJS, la directive ngMessages devrait permettre de gérer les messages d’erreur en toute simplicité. Ce module va écouter l’objet $error afin de décider quel message afficher en fonction de l’erreur constatée. Ainsi, un champ de texte peut à la fois :
- être requis
- avoir une longueur minimale
- avoir une longueur maximale
La directive affichera le message de l'erreur correspondante, au moment oprécis où elle se produira (champ vide, texte trop court, texte trop long)
<form name="myForm">
<label>Enter your name:</label>
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
Côté JS, il faudra bien évidemment inclure le module :
angular.module('ngMessagesExample', ['ngMessages']);