AngularJS je m'y mets !

Validation de formulaire

La validation d'un formulaire côté client est une tâche qui a été grandement améliorée avec l'arrivée du HTML 5. Mais d'une part il y a encore des navigateurs en service qui ne tiennent pas compte de ces améliorations. D'autre part il arrive souvent qu'on doivent ajouter des fonctionnalités. AngularJS apporte une réponse à ces deux problématiques. Pour la première c'est automatique et même les vieux navigateurs sont assistés pour les nouvelles possibilités du HTML 5. Pour le reste nous allons le voir. Voici l'exemple d'un formulaire d'inscription avec trois champs de saisie obligatoires pour le nom, le prénom et l'adresse Email. J'ai utilisé Twitter Bootstrap pour la mise en forme :

<div ng-app>
	<style type="text/css">.ng-invalid { border-color: #B94A48; }</style>
	<h1>Inscription</h1>
	<form name="ajoutUtilisateur" ng-controller="Controleur" ng-submit="soumission(ajoutUtilisateur.$valid)">
	  <div class="form-group">
	    <label for="nom">Nom :</label>
	    <input type="text" class="form-control" id="nom" placeholder="Votre nom" ng-model="user.nom" required>
	  </div>
	  <div class="form-group">
	    <label for="nom">Prénom :</label>
	    <input type="text" class="form-control" id="prenom" placeholder="Votre prénom" ng-model="user.prenom" required>
	  </div>
	  <div class="form-group">
	    <label for="email">Email :</label>
	    <input type="email" class="form-control" id="email" placeholder="Votre Email" ng-model="user.email" required>
	  </div>
	  <div class="alert" ng-class="messageClass" ng-show="message">{{message}}</div>
	  <button class="btn btn-default" type="submit">Envoyer</button>
	</form>
	<script>
		function Controleur($scope) {
		  $scope.message = '';
		  $scope.soumission = function (valid) {
		    if(valid) {
		    	$scope.messageClass='alert-success';
		    	$scope.message = 'Merci ' + $scope.user.nom + ' votre inscription est validée !';
		    }
		    else {
		    	$scope.messageClass='alert-danger';
		    	$scope.message = 'Désolé mais il y a des données non valides !';
		    }
		  };
		}
	</script>
</div>

Inscription

{{message}}

Lorsque AngularJS rencontre une balise form il crée un objet FormController. Parmi toutes les propriétés intéressantes de cet objet il y a $valid qui est vraie si tous les contrôles du formulaire ont une valeur correcte. Lors de la soumission du formulaire je transmets donc en paramètre cette valeur au contrôleur qui va effectuer son traitement en fonction d'elle.

Lorsqu'un contrôle n'est pas valide AngularJS lui adjoint la classe ng-invalid, on peut utiliser cette classe pour ajouter du style, comme je l'ai fait ici en prévoyant une règle pour la bordure. AngularJS prévoit ainsi 4 classes :

Evidemment dans un environnement réel il faudrait envoyer ces informations au serveur pour les mémoriser. Nous verrons cet aspect plus tard.


Retour à l'accueil...