Derniers tutoriels de développement web
 

AngularJS Directive textarea

❮ AngularJS Référence

Exemple

Un textarea avec liaison de données:

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

<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Essayez - le vous - même »

Définition et utilisation

AngularJS modifie le comportement par défaut de <textarea> éléments, mais seulement si le ng-model attribut est présent.

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

Ils fournissent une validation. Exemple: un <textarea> élément avec un required attribut, a $valid état mis à false tant qu'il est vide.

Ils assurent également le contrôle de l'Etat. AngularJS tient l'état actuel de tous les éléments textarea.

Les champs TextArea ont les états suivants:

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

La valeur de chaque état représente une valeur booléenne, et est soit true du false .

Syntaxe

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

Des éléments de Textarea sont appelés à l'aide de la valeur de la ng-model attribut.

Classes CSS

<textarea> éléments à l' intérieur d' une application AngularJS sont donnés certaines classes. Ces classes peuvent être utilisées à des éléments textarea de style en fonction de leur état.

Les classes suivantes sont ajoutées:

  • ng-untouched Le champ n'a pas encore été touché
  • ng-touched Le champ a été touché
  • ng-pristine Le champ n'a pas encore été modifié
  • ng-dirty Le champ a été modifié
  • ng-valid Le contenu du champ est valide
  • ng-invalid Le contenu du champ est pas valide
  • ng-valid- key Une clé pour chaque validation. Exemple: ng-valid-required , utile quand il y a plus d'une chose qui doit être validée
  • ng-invalid- key Exemple: ng-invalid-required

Les classes sont supprimées si la valeur qu'ils représentent est false .

Exemple

Appliquer des styles pour les éléments textarea valides et non valides, en utilisant la norme CSS:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>
Essayez - le vous - même »
❮ AngularJS Référence