Directive textarea d'AngularJS

Définition et utilisation

AngularJS modifie <textarea> comportement par défaut de l'élément, mais à condition que ng-model attribut 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 le DOM.

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

Ils fournissent également un contrôle d'état. AngularJS sauvegarde l'état actuel de tous les éléments de zone de texte.

Le champ de zone de texte a les états suivants :

• $untouched Ce champ n'a pas encore é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

Chaque valeur d'état représente une valeur booléenne, vraie ou fausse.

Exemple

Zone de texte avec liaison de données :

<textarea ng-model="myTextarea"></textarea>
<p>La valeur du champ de zone de texte est :</p>
<h1>{{myTextarea}}</h1>

Essayer personnellement

Syntaxe

<textarea ng-model="name"></textarea>

En utilisant ng-model La valeur de l'attribut pour faire référence à l'élément de zone de texte.

Les classes CSS

Dans une application AngularJS <textarea> Un élément reçoit certaines classes. Ces classes peuvent être utilisées pour définir les styles des éléments de zone de texte en fonction de leur état.

Les classes suivantes ont été ajoutées :

• ng-untouched Ce champ n'a pas encore é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 de zone de texte valide et invalide :

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

Essayer personnellement