Directive input d'AngularJS

Définition et utilisation

AngularJS modifie <input> le comportement par défaut de l'élément, à condition que l'attribut ng-model existe.

Ils fournissent des liaisons de données, ce qui signifie qu'ils font partie du modèle AngularJS et peuvent être mentionnés et mis à jour dans les fonctions AngularJS et dans le DOM.

Ils fournissent des validations. Exemple : ceux qui ont required attribut <input> l'élément, tant qu'il est vide, son $valid L'état sera réglé sur false.

Ils fournissent également le contrôle des états. AngularJS enregistre l'état actuel de tous les éléments d'entrée.

Le champ d'entrée a les états suivants :

• $untouched Ce champ n'a pas été touché
• $touched Ce champ a été touché
• $pristine Ce champ n'a pas encore été modifié
• $dirty Ce champ a été modifié
• $invalid Le contenu du champ est invalide
• $valid Le contenu du champ est valide

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

Exemple

Boîte de saisie avec liaison de données :

<input ng-model="myInput">
<p>La valeur de la boîte de saisie est：</p>
<h1>{{myInput}}</h1>

Essayer Par Soi-Même

Syntaxe

<input ng-model="name">

Utiliser ng-model La valeur de l'attribut pour faire référence à l'élément d'entrée.

Classes CSS

Dans une application AngularJS <input> L'élément reçoit certaines classes. Ces classes peuvent être utilisées pour définir le style de l'élément en fonction de son état.

Les classes suivantes ont été ajoutées :

• ng-untouched Ce champ n'a pas été touché
• ng-touched Ce champ a été touché
• ng-pristine Ce champ n'a pas encore été modifié
• ng-dirty Ce champ a été modifié
• ng-valid Le contenu du champ est valide
• ng-invalid Le contenu du champ est invalide
• ng-valid-key Vérifiez chaque clé à chaque fois. Par exemple :ng-valid-requiredC'est trè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 falseCes classes seront supprimées si,

Exemple

Appliquer des styles CSS standard aux éléments d'entrée valides et invalides :

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

Essayer Par Soi-Même