Neueste Web-Entwicklung Tutorials
 

AngularJS TextArea- Richtlinie

❮ AngularJS Referenz

Beispiel

Ein Textfeld mit Datenbindung:

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

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

Definition und Verwendung

AngularJS ändert das Standardverhalten von <textarea> Elemente, aber nur , wenn die ng-model Attribut vorhanden ist.

Sie bieten Datenbindung, was bedeutet, sie Teil des AngularJS Modells sind und bezeichnet werden kann, und aktualisiert werden, sowohl in AngularJS Funktionen und in dem DOM.

Sie bieten Validierung. Beispiel: ein <textarea> Element mit einem required Attribut, hat die $valid Zustand gesetzt false , solange es leer ist.

Sie bieten auch die staatliche Kontrolle. AngularJS hält den aktuellen Status aller Textfeldelemente.

Textfelder haben folgende Staaten:

  • $untouched das Feld nicht berührt wurde noch
  • $touched Das Feld berührt wurde
  • $pristine Das Feld wurde noch nicht geändert
  • $dirty Das Feld wurde geändert
  • $invalid Der Feldinhalt nicht gültig ist
  • $valid Der Feldinhalt ist gültig

Der Wert eines jeden Staates repräsentiert einen Booleschen Wert, und ist entweder true von false .

Syntax

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

Textarea Elemente werden unter Verwendung des Wertes des genannten ng-model - Attribut.

CSS-Klassen

<textarea> Elemente innerhalb einer AngularJS Anwendung sind bestimmte Klassen gegeben. Diese Klassen können auf Stil TextArea- Elemente nach ihrem Zustand verwendet werden.

Folgende Klassen werden hinzugefügt:

  • ng-untouched Das Feld wurde bisher noch nicht berührt
  • ng-touched Das Feld berührt wurde
  • ng-pristine Das Feld wurde noch nicht geändert
  • ng-dirty Das Feld geändert wurde
  • ng-valid Der Feldinhalt ist gültig
  • ng-invalid Der Feldinhalt nicht gültig
  • ng-valid- key Ein Schlüssel für jede Validierung. Beispiel: ng-valid-required , nützlich , wenn es mehr als eine Sache gibt , die überprüft werden müssen
  • ng-invalid- key Beispiel: ng-invalid-required

Die Klassen entfernt werden , wenn der Wert , den sie vertreten , ist false .

Beispiel

Anwenden von Stilen für gültige und ungültige Textfeldelemente unter Verwendung von Standard CSS:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>
Versuch es selber "
❮ AngularJS Referenz