AngularJS textarea Anweisung

AngularJS-Referenzhandbuch

Definition und Verwendung

AngularJS ändert <textarea> Standardverhalten des Elements, aber unter der Voraussetzung, dass ng-model Eigenschaft existiert.

Sie bieten Datenbindung, was bedeutet, dass sie Teil des AngularJS-Modells sind und in AngularJS-Funktionen und DOM referenziert und aktualisiert werden können.

Sie bieten Validierung. Beispiel: mit required Eigenschaft <textarea> Element, solange es leer ist, sein $valid Der Zustand wird aufgesetzt false.

Sie bieten auch Zustandssteuerung. AngularJS speichert den aktuellen Zustand aller Textbereichselemente.

Das Textbereichsfeld hat folgende Zustände:

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

Der Wert jeder Status represents einen Boolean-Wert, wahr oder falsch.

Beispiel

Textbereichsfeld mit Datenbindung:

<textarea ng-model="myTextarea"></textarea>
<p>Der Wert des Textbereichsfeldes ist:</p>
<h1>{{myTextarea}}</h1>

Versuchen Sie es selbst

Syntax

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

Durch die Verwendung von ng-model Wert der Eigenschaft, um das Textbereichselement zu referenzieren.

CSS-Klassen

Innerhalb von AngularJS-Anwendungen <textarea> Das Element wird bestimmten Klassen zugewiesen. Diese Klassen können verwendet werden, um den Stil des Textbereichselements basierend auf seinem Zustand zu setzen.

Die folgenden Klassen wurden hinzugefügt:

  • ng-untouched Dieses Feld wurde noch nicht berührt
  • ng-touched Dieses Feld wurde berührt
  • ng-pristine Dieses Feld wurde noch nicht geändert
  • ng-dirty Dieses Feld wurde geändert
  • ng-valid Feldinhalt ist gültig
  • ng-invalid Feldinhalt ist ungültig
  • ng-valid-key Jedes Mal, wenn ein Schlüssel überprüft wird. Beispiel:ng-valid-requiredwird dies bei mehreren zu überprüfenden Dingen sehr nützlich
  • ng-invalid-key Beispiel:ng-invalid-required

Wenn der Wert, der von der Klasse repräsentiert wird, falsewird diese Klasse entfernt.

Beispiel

Verwenden Sie Standard-CSS, um Stile für die Elemente der Textbereichseigenschaften, die gültig und ungültig sind, anzuwenden:

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

Versuchen Sie es selbst

AngularJS-Referenzhandbuch