Qui dit application métier, dit contrôle de saisie !
Dans cet article, je vais vous montrer comment créer une directive permettant de contrôler la saisie d’un champ texte par exemple. Vous avez certainement déjà dû utilisé des directives natives d’angular comme : required, ngMinLength…
Pour vous montrer comment faire, je vais prendre un exemple assez simple : vérifier que le champ contient bien « x » caractères (à noter que nous pourrions utiliser un ngMinLength combiné à un ngMaxLength mais cela serait un peu plus gourmand).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
angular.module('app.core') .directive('isLength', function () { return { //Obligation d'un ngModel afin de pouvoir récupérer la valeur de saisie require: 'ngModel', link: function postLink(scope, element, attrs, ctrl) { //Ajout du validator : Attention le nom donné (ici "isLength" sera important lorsque l'on // voudra rajouter des messages d'erreur dans l'interface ctrl.$validators.isLength = function (modelValue, viewValue) { //On vérifie que le champ n'est pas vide if (ctrl.$isEmpty(modelValue)) { return true; } //Ici on récupère la taille autorisée (définie dans l'attribut) var authorizedLength = parseInt(attrs.isLength.toString()); //Enfin on fait notre test (taille du champ) return viewValue.length == authorizedLength; }; } }; }); |
Et donc pour l’utiliser on fait :
|
1 2 3 |
<form name="myForm"> <input name=totoInput" type="text" ng-model="toto" is-length="8" /> </form> |
Du coup tant que je n’aurais pas saisi 8 caractères mon champ ne sera pas valide et donc mon form non plus.
Je combine souvent ces règles avec la librairie angular-messages qui permet d’avoir des messages d’erreur en fonction de notre règle de validation (j’en parlerai dans un prochain article).