formDirective AngularJS
Exemple
L'"état valide" de ce formulaire ne sera pas considéré comme "vrai", tant que le champ de saisie requis est vide :
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
Définition et utilisation
AngularJS modifie le comportement par défaut de l' <form>élément.
Les formulaires à l'intérieur d'une application AngularJS reçoivent certaines propriétés. Ces propriétés décrivent l'état actuel du formulaire.
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
La valeur de chaque état représente une valeur booléenne et est soit true
ou false.
Les formulaires dans AngularJS empêchent l'action par défaut, qui soumet le formulaire au serveur, si l'attribut d'action n'est pas spécifié.
Syntaxe
<form name="formname"></form>
Les formulaires sont référencés à l'aide de la valeur de l'attribut name.
Classes CSS
Les formulaires à l'intérieur d'une application AngularJS reçoivent certaines classes . Ces classes peuvent être utilisées pour styliser les formulaires en fonction de leur état.
Les classes suivantes sont ajoutées :
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.
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>