docAngularJS TP 3: Validation des entrées - e
download 
Plainte Transcription
AngularJS TP 3: Validation des entrées - e
AngularJS
TP 3: Validation des entrées
L’objectif de ce TP est d’expliquer comment travailler avec la validation des entrée dans AngularJS.
1
Gestion des entrées dans Angular
AngularJS propose des attributs supplémentaires concernant les données d’entrées. Voici une liste d’attributs concernant les entrées en HTML5 :
• required. Une erreur de validation apparaı̂tra si la valeur n’est pas saisie.
• ngMinlength. Longueur minimale de la donnée en entrée.
• ngMaxlength. Longueur maximale de la donnée en entrée.
Pour illustration, nous pouvons utiliser required dans une entrée de la manière suivante.
<input type="text" id="name" ng-model=’name’ required>
Ceci veut dire que ce champs doit être obligatoirement renseigné.
2
Validation des entrées
Nous pouvons utiliser la validation d’entrées en HTML5 et les combiner avec AngularJS ngModel dans AngularJS
en ajoutant les classes CSS suivantes :
• ng-valid
• ng-invalid
• ng-pristine
• ng-dirty
Nous pouvons changer ces classes CSS pour valider des entrées. Dans la section suivante, nous construisons une
application AngularJS simple avec validation d’entrées.
3
Désactivation de bouton
Parfois, quand vous devez remplir un formulaire web, vous devez cocher une CheckBox correspondant par exemple
aux conditions d’utilisation pour activer le bouton Submit. Maintenant nous pouvons le faire simplement avec
AngularJS. Créez un fichier HTML, appelé disablebutton.html.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Disable Button</title>
<script src="lib/angular.min.js"></script>
</head>
<body>
<p>Demo disable button. Checked CheckBox to enable button</p>
<br>
<p><input type="checkbox" ng-model="agree">I agree to the terms & conditions</p>
<p>
<button type="submit" ng-disabled="!agree">Submit</button>
</p>
</body>
</html>
Nous définissons un ng-model="agree" dans l’éléments CheckBox. Pour désactiver un bouton,
nous pouvons utiliser ng-disabled dans le champ qui le définit/ Nous passion la valeur
depuis CheckBox au bouton Submit avec ng-disabled="!agree". Enregistrez ce code et exécutez
le fichier. Cochez la CheckBox pour activer le bouton Submit.
4
Demo
Nous allons développer une application AngularJS avec un formulaire de type input avec
validation des entrées. Nous devons créer d’abord un contrôleur que nous appellerons
inputvalidation.js. Saisissez dans ce fichier le code suivant :
var myApp = angular.module(’InputValidation’,[]);
myApp.controller(’MyControlller’, [’$scope’, function($scope) {
$scope.submitForm = function(isValid) {
if (isValid) {
alert(’Data was saved’);
}
};
}]);
Nous affichons une alerte si isValide est vrai.
La prochaine étape consiste à créer un fichier HTML appelé inputvalidation.html contenant
le script suivant :
<!DOCTYPE html>
<html ng-app="InputValidation">
<head>
<title>Demo Input Validation</title>
<link rel="stylesheet" href="css/main.css">
<script src="lib/angular.min.js"></script>
<script src="controllers/inputvalidation.js"></script>
</head>
<body ng-controller=’MyControlller’>
<form name="form" ng-submit="submitForm(form.$valid)" novalidate class="myform">
<div>
<p>
<label for="name">Full Name:</label>
<input type="text" id="name" ng-model=’name’ required>
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" ng-model=’email’ required>
</p>
<p>
<button type="submit" ng-disabled="form.$invalid">Submit</button>
</p>
</div>
</form>
</body>
</html>
Nous pouvons voir que ng-submit appelle Form() à l’aide de form.$valid. Si cette dernière
est vrai, nous obtenons une alerte. de même nous désactivons le bouton Submit si c’est
faux grâce à ng-disabled avec comme paramètre form.$valid.
Maintenant, concernant la classe CSS, nous pouvons écrire le script suivant dans un fichier
main.css.
.myform input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
.myform input.ng-valid.ng-dirty {
background-color: #78FA89;
}
Nous modifions ng-valid.ng-dirty et ng-invalid.ng-dirty pour exprimer si la validation
est réussie ou non. enregistrez vos codes et exécutez inputvalidation.html. Remplissez
les champs et observez le résultat.
Expliquez l’utilité de cette application par rapport à une méthode classique pour obtenir
ces fonctionnalités.
