Esempio
Un textarea con associazione dati:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Prova tu stesso " Definizione e utilizzo
AngularJS modifica il comportamento predefinito di <textarea> elementi, ma solo se il ng-model attributo è presente.
Forniscono associazione dati, che significa che sono parte del modello AngularJS, e possono essere indicati, e aggiornati, sia nelle funzioni AngularJS e nel DOM.
Essi forniscono la convalida. Esempio: un <textarea> elemento con una required attributo ha il $valid stato impostato a false fintanto che è vuota.
Essi forniscono anche il controllo dello stato. AngularJS tiene lo stato attuale di tutti gli elementi textarea.
campi textarea hanno i seguenti stati:
-
$untouchedIl campo non è stato ancora toccato -
$touchedIl campo è stato toccato -
$pristineIl campo non è stato ancora modificato -
$dirtyIl campo è stato modificato -
$invalidIl contenuto del campo non è valido -
$validIl contenuto del campo è valido
Il valore di ogni stato rappresenta un valore booleano, ed è o true del false .
Sintassi
<textarea ng-model=" name "></textarea> Elementi dell'area di testo vengono indicati con utilizzando il valore della ng-model attributo.
Le classi CSS
<textarea> elementi all'interno di un'applicazione AngularJS sono date certe classi. Queste classi possono essere utilizzate per gli elementi di stile textarea secondo il loro stato.
Vengono aggiunte le seguenti classi:
-
ng-untouchedIl campo non è stato ancora toccato -
ng-touchedIl campo è stato toccato -
ng-pristineIl campo non è stato ancora modificato -
ng-dirtyIl campo è stato modificato -
ng-validIl contenuto del campo è valido -
ng-invalidIl contenuto campo non è valida -
ng-valid- keyUna chiave per ogni convalida. Esempio:ng-valid-required, utile quando ci sono più di una cosa che deve essere convalidato -
ng-invalid- keyEsempio:ng-invalid-required
Le classi vengono rimossi se il valore che essi rappresentano è false .
Esempio
Applicare stili per gli elementi textarea valide e non valide, usando CSS standard:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>
Prova tu stesso "