Tutoriel AngularJS : validation d'un formulaire

• Partie 1 : Google, Twitter, et AngularJSPartie 1t
• Partie 2 : créer un lecteur de flux RSSPartie 2
• Partie 3 : afficher le flux RSSPartie 3
• Partie 4 : gérer les flux RSSPartie 4
• Partie 5 : testsPartie 5
• Partie 6 : ajouter des dépendancesPartie 6
• Partie 7 : validation d'un formulairePartie 7
• Partie 8 : itérateurs et filtresPartie 8
• Partie 9 : installationPartie 9

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 valideursHTML5 form validators 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é.

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.

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 = '';
  }
};

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 ngShowngShow 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.

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 ngDisabledngDisabled 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 !

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.

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.