Validation de formulaire AngularJS
AngularJS peut valider les données d'entrée.
Validation du formulaire
AngularJS offre une validation de formulaire côté client.
AngularJS surveille l'état du formulaire et des champs de saisie (input, textarea, select) et vous permet d'informer l'utilisateur de l'état actuel.
AngularJS contient également des informations indiquant s'ils ont été touchés, modifiés ou non.
Vous pouvez utiliser des attributs HTML5 standard pour valider l'entrée, ou vous pouvez créer vos propres fonctions de validation.
La validation côté client ne peut à elle seule sécuriser l'entrée de l'utilisateur. La validation côté serveur est également nécessaire.
Obligatoire
Utilisez l'attribut HTML5 requiredpour spécifier que le champ de saisie doit être rempli :
Exemple
Le champ de saisie est obligatoire :
<form name="myForm">
<input name="myInput" ng-model="myInput"
required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Utilisez le type HTML5 emailpour spécifier que la valeur doit être un e-mail :
Exemple
Le champ de saisie doit être un e-mail :
<form name="myForm">
<input name="myInput" ng-model="myInput"
type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
État du formulaire et état de l'entrée
AngularJS met constamment à jour l'état du formulaire et des champs de saisie.
Les champs de saisie ont les états suivants :
$untouchedLe terrain n'a pas encore été touché$touchedLe champ a été touché$pristineLe champ n'a pas encore été modifié$dirtyLe champ a été modifié$invalidLe contenu du champ n'est pas valide$validLe contenu du champ est valide
Ce sont toutes des propriétés du champ de saisie et sont soit true
ou false.
Les formulaires ont les états suivants :
$pristineAucun champ n'a encore été modifié$dirtyUn ou plusieurs ont été modifiés$invalidLe contenu du formulaire n'est pas valide$validLe contenu du formulaire est valide$submittedLe formulaire est soumis
Ce sont toutes des propriétés du formulaire et sont soit true
ou false.
Vous pouvez utiliser ces états pour afficher des messages significatifs à l'utilisateur. Par exemple, si un champ est obligatoire et que l'utilisateur le laisse vide, vous devez avertir l'utilisateur :
Exemple
Afficher un message d'erreur si le champ a été touché ET est vide :
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</span>
Classes CSS
AngularJS ajoute des classes CSS aux formulaires et aux champs de saisie en fonction de leurs états.
Les classes suivantes sont ajoutées ou supprimées des champs d'entrée :
ng-untouchedLe terrain n'a pas encore été touchéng-touchedLe champ a été touchéng-pristineLe champ n'a pas encore été modifiéng-dirtyLe champ a été modifiéng-validLe contenu du champ est valideng-invalidLe contenu du champ n'est pas valideng-valid-keyUne clé pour chaque validation. Exemple :ng-valid-required, utile lorsqu'il y a plus d'une chose qui doit être validéeng-invalid-keyExemple:ng-invalid-required
Les classes suivantes sont ajoutées ou supprimées des formulaires :
ng-pristineAucun champ n'a pas encore été modifiéng-dirtyUn ou plusieurs champs ont été modifiésng-validLe contenu du formulaire est valideng-invalidLe contenu du formulaire n'est pas valideng-valid-keyUne clé pour chaque validation. Exemple :ng-valid-required, utile lorsqu'il y a plus d'une chose qui doit être validéeng-invalid-keyExemple:ng-invalid-required
Les classes sont supprimées si la valeur qu'elles représentent est false.
Ajoutez des styles pour ces classes pour donner à votre application une interface utilisateur meilleure et plus intuitive.
Exemple
Appliquez des styles en utilisant le CSS standard :
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Les formulaires peuvent également être stylés :
Exemple
Appliquez des styles aux formulaires non modifiés (vierges) et aux formulaires modifiés :
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Validation personnalisée
Créer votre propre fonction de validation est un peu plus délicat ; Vous devez ajouter une nouvelle directive à votre application et gérer la validation dans une fonction avec certains arguments spécifiés.
Exemple
Créez votre propre directive, contenant une fonction de validation personnalisée, et faites-y référence en utilisant my-directive.
Le champ ne sera valide que si la valeur contient le caractère "e":
<form name="myForm">
<input name="myInput" ng-model="myInput" required
my-directive>
</form>
<script>
var app = angular.module('myApp',
[]);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element,
attr, mCtrl) {
function myValidation(value)
{
if (value.indexOf("e") > -1)
{
mCtrl.$setValidity('charE',
true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
Exemple expliqué :
En HTML, la nouvelle directive sera référencée en utilisant l'attribut
my-directive.
Dans le JavaScript, nous commençons par ajouter une nouvelle directive nommée myDirective.
N'oubliez pas que lorsque vous nommez une directive, vous devez utiliser un nom de casse camel,
myDirective, mais lorsque vous l'invoquez, vous devez utiliser -un nom séparé,
my-directive.
Ensuite, renvoyez un objet où vous spécifiez que nous avons besoin ngModel, qui est le ngModelController.
Créez une fonction de liaison qui prend des arguments, où le quatrième argument, mCtrl, est le ngModelController,
Spécifiez ensuite une fonction, dans ce cas nommée myValidation, qui prend un argument, cet argument est la valeur de l'élément d'entrée.
Testez si la valeur contient la lettre "e" et définissez la validité du contrôleur de modèle sur trueou false.
Enfin, mCtrl.$parsers.push(myValidation);ajoutera la
myValidationfonction à un tableau d'autres fonctions, qui seront exécutées chaque fois que la valeur d'entrée change.
Exemple de validation
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user"
required>
<span style="color:red" ng-show="myForm.user.$dirty &&
myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username
is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span
style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl',
function($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>
L'attribut de formulaire HTML novalidate est utilisé pour désactiver la validation par défaut du navigateur.
Exemple expliqué
La directive AngularJS ng-model lie les éléments d'entrée au modèle.
L'objet model a deux propriétés : user et email .
En raison de ng-show , les étendues avec color:red ne sont affichées que lorsque l'utilisateur ou l'e-mail est $dirty et $invalid .