inputDirective AngularJS
Exemple
Un champ de saisie avec data-binding :
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Définition et utilisation
AngularJS modifie le comportement par défaut des <input>éléments, mais uniquement si l' ng-modelattribut est présent.
Ils fournissent une liaison de données, ce qui signifie qu'ils font partie du modèle AngularJS et peuvent être référencés et mis à jour, à la fois dans les fonctions AngularJS et dans le DOM.
Ils assurent la validation. Exemple : un <input>élément avec un requiredattribut, a l' $validétat défini sur
falsetant qu'il est vide.
Ils assurent également le contrôle de l'État. AngularJS contient l'état actuel de tous les éléments d'entrée.
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
La valeur de chaque état représente une valeur booléenne et est soit true
ou false.
Syntaxe
<input ng-model="name">
Les éléments d'entrée sont référencés à l'aide de la valeur de l' ng-modelattribut.
Classes CSS
<input>les éléments à l'intérieur d'une application AngularJS reçoivent certaines classes . Ces classes peuvent être utilisées pour styliser les éléments d'entrée en fonction de leur état.
Les classes suivantes sont ajoutées :
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 sont supprimées si la valeur qu'elles représentent est false.
Exemple
Appliquez des styles pour les éléments d'entrée valides et non valides, en utilisant le CSS standard :
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>