Tutoriel AngularJS : validation d'un formulaire

Alex Young

Traducteur

vermine

Cet article est la traduction de AngularJS: Form Validation publié sur DailyJS.

Commentez

- Titre : Tutoriel AngularJS : validation d'un formulaire

- Auteur : Alex Young

- Traducteur : vermine

- Parution : 18 juillet 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Alex Young. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Avant propos

- II. Validation d'url

- III. Surveiller l'état de la validation

- IV. Se mettre à niveau avec le HTML5

- V. Désactivation du bouton

- VI. Conclusion

- VII. Remerciements

I - Avant propos

- Partie 1 : Google, Twitter, et AngularJS

- Partie 2 : créer un lecteur de flux RSS

- Partie 3 : afficher le flux RSS

- Partie 4 : gérer les flux RSS

- Partie 5 : tests

- Partie 6 : ajouter des dépendances

- Partie 7 : validation d'un formulaire

- Partie 8 : itérateurs et filtres

- Partie 9 : installation

Cette semaine nous allons regarder la validation de formulaires avec AngularJS. AngularJS a plusieurs directives qui prennent en charge la validation des champs de formulaires, et ils sont basés sur les valideurs de formulaire HTML5. Vous pouvez spécifier qu'un champ est obligatoire, d'une certaine taille, d'un certain type et doit correspondre à un modèle donné.

II - Validation d'url

Cette série de tutoriel décrit un lecteur de flux RSS, donc ça tombe bien qu'un des valideurs du HTML5 sert à vérifier une URL. Il peut être utilisé en ajoutant l'attribut type="url" à un input. AngularJS prend en charge cela via la directive url de input. Elle prend diverses options. Celles qui nous intéressent sont required et ng-model.

La directive de ng-model permet à l'input d'être lié à un modèle, mais n'importe quelle expression AngularJS peut être utilisée. La directive de form permet aux formulaires d'être gérés avec AngularJS et d'être liés aux contrôleurs.

Le simple fait d'ajouter un form et un input avec type="url" va se traduire par le support d'une validation de base (dans app/views/main.html) :

<form name="newFeed">
URL: <input size="80" name="url" ng-model="newFeed.url" type="url" required>
<button ng-click="addFeed(newFeed)">Ajouter un flux</button>
</form>

Toutefois, cela ne fonctionnera pas tout à fait avec le code du contrôleur que j'ai écrit dans les parties précédentes parce que addFeed n'est pas mis en place pour surveiller la validation.

III - Surveiller l'état de la validation

Dans un contrôleur, une valeur liée peut être interrogée pour surveiller l'état de la validation en vérifiant la propriété $valid. La méthode addFeed, dans le fichier app/scripts/controllers/main.js, peut être modifiée comme suit :

$scope.addFeed = function(feed) {
if (feed.$valid) {
// Copier l'instance du flux et reset l'URL dans le formulaire
$scope.feeds.push(feed);
$scope.newFeed.url = {};
}
};

Cela devrait fonctionner mais il y a une erreur : $scope.newFeed.url ne peut être réinitialisé en l'assignant à un objet litérale, parce que newFeed est maintenant définit avec des propriétés internes au support de la validation. Au lieu de cela, copiez le nouvel objet et réinitialisez les valeurs dans newFeed :

$scope.addFeed = function(feed) {
if (feed.$valid) {
// Copier l'instance du flux et reset l'URL dans le formulaire
var newFeed = angular.copy(feed);
$scope.feeds.push(newFeed);
$scope.fetchFeed(newFeed);
$scope.newFeed.url = '';
}
};

IV - Se mettre à niveau avec le HTML5

Nous devrions probablement ajouter des messages d'erreur qui sont compatibles sur plusieurs navigateurs. Pour ce faire, vous pouvez utiliser la directive ng-show :

<form name="newFeed" novalidate>
URL: <input size="80" name="url" ng-model="newFeed.url" type="url" required>
<button ng-click="addFeed(newFeed)">Ajouter un flux</button>
<span class="error" ng-show="newFeed.$error.required">Requis !</span>
<span class="error" ng-show="newFeed.$error.url">Format d'URL invalide !</span>
</form>

La directive ngShow peut afficher de manière conditionnelle une partie du DOM basée sur une expression AngularJS. Dans ce cas, les résultats de la validation sont surveillés. Soit dit en passant, les résultats de la validation peuvent être consultés dans la propriété $error pour le modèle.

Notez également que j'ai ajouté l'attribut novalidate au formulaire. Si vous ne faites pas cela, il y aura confusion avec la validation HTML5.

V - Désactivation du bouton

Une autre belle fonctionnalité est d'utiliser ng-disabled pour désactiver le bouton lorsqu'une URL non valide a été spécifiée. La directive ngDisabled prend une expression AngularJS, comme le font les directives citées précédemment :

<form name="newFeed" novalidate>
URL: <input size="80" name="url" ng-model="newFeed.url" type="url" required>
<button ng-disabled="!newFeed.$valid" ng-click="addFeed(newFeed)">Ajouter un flux</button>
<span class="error" ng-show="newFeed.$error.required">Requis !</span>
<span class="error" ng-show="newFeed.$error.url">Format d'URL invalide !</span>
</form>

La différence ici est que j'ai utilisé ! pour obtenir l'inverse de l'expression : !newFeed.$valid. Oui, c'est vraiment aussi simple que ça !

VI - Conclusion

Il y a d'autres expressions, vous pouvez faire davantage de choses. Pour en savoir plus, visitez la page : Angular Developer Guide, Expressions.

La version pour ce tutoriel est la 0dcc996.

VII - Remerciements

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original AngularJS: Form Validation du site DailyJS.

Je remercie également ClaudeLELOUP pour sa relecture attentive et assidue.