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

<div ng-app="sample">
   <form class="form-horizontal" name="registerForm">
   <div class="form-group">
   <label class="col-md-3 control-label" for="Email">Email</label>
   <div class="col-md-4">
   <input id="Email" type="email" class="form-control" name="Email" ng-model="Email" />
   </div>
   </div>
   <div class="form-group">
   <label class="col-md-3 control-label" for="Password">Password</label>
   <div class="col-md-4">
   <input id="Password" type="password" class="form-control" name="Password" ng-model="Password" />
   </div> 
   </div>
   <div class="form-group">
   <label class="col-md-3 control-label" for="ConfirmPassword">Confirm Password</label>
   <div class="col-md-4">
   <input id="ConfirmPassword" type="password" class="form-control" name="ConfirmPassword" ng-model="ConfirmPassword" />
   </div>
   </div>
   <div class="form-group">
   <div class="col-md-offset-3 col-md-9">
   <input type="submit" class="btn btn-default" value="Sign Up" />
   </div>
   </div>
   </form>
</div>

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. <rule> : Indique si la règle de validation est violée

Ces propriétés sont accessibles via :

• <nom du formulaire>. <propriété>
• <nom du formulaire>. <nom du champ>. <propriété>

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

<input
  [type="email | number | month | url | ..."]
  [required=""]
  [ng-required=""]
  [min=""]
  [max=""]
  [ng-minlength=""]
  [ng-maxlength=""]
  [ng-pattern=""]>
</input>

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

<input ng-minlength="6" name="Password" />
<span class="text-danger" ng-show="registerForm.Password.$error.minlength">
   Doit contenir au minimum 6 caractères
</span>

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 () {
       /*
       * <input type="password" ng-model="Password" />
       * <input type="password" ng-model="ConfirmPassword" equals-to="Password" />
       */
       return {
           restrict: 'A', // S'utilise uniquement en tant qu'attribut
           scope: true,
           require: 'ngModel',
           link: function (scope, elem, attrs, control) {
               var check = function () {
               //Valeur du champs courant 
               var v1 = scope.$eval(attrs.ngModel); // attrs.ngModel = "ConfirmPassword"
               //valeur du champ à comparer
               var v2 = scope.$eval(attrs.equalsTo).$viewValue; // attrs.equalsTo = "Password"
               return v1 == v2;
           };
           scope.$watch(check, function (isValid) {
               // Défini si le champ est valide
               control.$setValidity("equalsTo", isValid);
           });
       }
   };
}]);

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

<input name="Email" type="email" required />
<input name="Password" required ng-minlength="6" />
<input name="ConfirmPassword" required equals-to="registerForm.Password" />

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” :

<div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.Password.$invalid, 'has-success': registerForm.Password.$valid}">
  //
</div>

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” :

<input type="submit" class="btn btn-default" value="Sign Up" ng-disabled="registerForm.$invalid" />

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