HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

textareaDirective AngularJS

❮ Référence AngularJS

Exemple

Une zone de texte avec data-binding :

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

<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>

Définition et utilisation

AngularJS modifie le comportement par défaut des <textarea>é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 <textarea>é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 textarea.

Les champs Textarea ont les états suivants :

  • $untouched Le terrain 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 n'est pas valide
  • $valid Le contenu du champ est valide

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

Syntaxe

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

Les éléments Textarea sont référencés en utilisant la valeur de l' ng-modelattribut.

Classes CSS

<textarea>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 textarea en fonction de leur état.

Les classes suivantes sont ajoutées :

  • ng-untouched Le terrain 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 n'est pas valide
  • ng-valid-keyUne clé pour chaque validation. Exemple : ng-valid-required, utile lorsqu'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'elles représentent est false.

Exemple

Appliquez des styles pour les éléments de zone de texte valides et non valides, en utilisant le CSS standard :

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>
❮ Référence AngularJS