Directive form AngularJS

Définition et utilisation

Modification AngularJS <form> Comportement par défaut de l'élément.

Les formulaires dans les applications AngularJS sont dotés de certaines propriétés. Ces propriétés décrivent l'état actuel du formulaire.

Le formulaire a les états suivants :

• $pristine Aucun champ n'a été modifié
• $dirty Un ou plusieurs champs ont été modifiés
• $invalid Le contenu du formulaire est invalide
• $valid Le contenu du formulaire est valide
• $subscribed Le formulaire a été soumis

La valeur de chaque état représente une valeur booléenne, pour true ou false.

Si l'attribut action n'est pas spécifié, le formulaire AngularJS empêche l'opération par défaut, c'est-à-dire le soumission du formulaire au serveur.

Exemple

Exemple 1

Tant que le champ d'entrée requis est vide, l'état 'valid' du formulaire n'est pas considéré comme 'true' :

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>L'état de validité du formulaire est :</p>
<h1>{{myForm.$valid}}</h1>

Essayez-le vous-même

Exemple 2

Appliquer le style aux formulaires non modifiés (originaux) et aux formulaires modifiés :

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

Essayez-le vous-même

Syntaxe

<form name="formname</form>

En utilisant name Les valeurs des attributs pour référencer le formulaire.

Classes CSS

Les formulaires à l'intérieur des applications AngularJS sont attribués à certaines classes. Ces classes peuvent être utilisées pour définir les styles des formulaires en fonction de leur état.

Les classes suivantes ont été ajoutées :

• ng-pristine Aucun champ n'a été modifié
• ng-dirty Un ou plusieurs champs ont été modifiés
• ng-valid Le contenu du formulaire est valide
• ng-invalid Le contenu du formulaire est invalide
• ng-valid-key Vérifiez chaque clé à chaque fois. Par exemple :ng-valid-requiredtrès utile lorsque plusieurs éléments doivent être vérifiés
• ng-invalid-key Par exemple :ng-invalid-required

Si la valeur représentée par la classe est falseSi ces classes sont supprimées.