Dans cet article nous allons voir comment un formulaire simple avec AngularJS et Bootstrap. Le formulaire ressemblera à

Les règles sont les suivantes :

• Email obligatoire
• Password obligatoire et doit contenir au moins 6 caractères
• ConfirmPassword et Password doivent avoir la même valeur
• Le bouton doit être désactivé si le formulaire n'est pas valide

Le formulaire

   

   

   Email
   

   
   
   
   

   Password
   

   
   
 
   
   

   Confirm Password
   

   
   
   
   

   

   
   
   
   

Validation avec AngularJS

AngularJS prend en charge les formulaires et leur validation. Pour cela plusieurs propriétés sont accessibles au niveau du formulaire et des champs qui le compose :

• $valid : Indique si les règles de validation sont respectées pour l'élément actuel
• $invalid : Indique si au moins une des règles de validation est violée pour l'élément actuel
• $pristine : Indique si l'élément actuel n'a pas été modifié
• $dirty : Indique si l'élément actuel a été modifié
• $error. : Indique si la règle de validation est violée

Ces propriétés sont accessibles via :

• .
• . .

Les règles de validation supportées de base sont :

Par exemple on peut afficher un message d'erreur lorsqu'une règle de validation d'un champ n'est pas respectée :

   Doit contenir au minimum 6 caractères

Il est également possible d'ajouter ses propres règles de validation en créant des directives. Par exemple nous avons besoin de vérifier que les deux mots de passe sont identiques. Cette règle de validation n'existe pas, nous allons donc la créer :

var app = angular.module('sample', [])
   .directive('equalsTo', [function () ]);

Nous pouvons donc modifier notre formulaire pour y ajouter les différentes règles :

Mise à jour de l'interface graphique

Maintenant que toutes les règles de validation sont en place, mettons à jour l'UI dynamiquement pour indiquer à l'utilisateur si sa saisie est valide. Bootstrap utilise les classes CSS "has-error" et "has-success" pour indiquer la validité de la saisie. Pour ajouter ces classes dynamiquement on utilise la directive "ng-class" :

  //

la classe CSS "has-error" sera défini si le formulaire est modifié et que le champ password est invalide (texte vide ou longueur inférieure à 6 caractères). La classe CSS "has-success" sera défini si champ password est valide.

La dernière étape consiste à désactiver le bouton tant que le formulaire n'est pas valide. Pour cela nous allons utiliser la directive "ng-disabled" :

En combinant le tout on obtient le résultat voulu (JsFiddle) :