textarea
Direttiva AngularJS
Esempio
Un'area di testo con associazione dati:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Definizione e utilizzo
AngularJS modifica il comportamento predefinito degli <textarea>
elementi, ma solo se l' ng-model
attributo è presente.
Forniscono l'associazione dei dati, il che significa che fanno parte del modello AngularJS e possono essere referenziati e aggiornati, sia nelle funzioni AngularJS che nel DOM.
Forniscono la convalida. Esempio: un <textarea>
elemento con un required
attributo, ha lo $valid
stato impostato su
false
finché è vuoto.
Forniscono anche il controllo statale. AngularJS mantiene lo stato corrente di tutti gli elementi textarea.
I campi dell'area di testo hanno i seguenti stati:
$untouched
Il campo non è stato ancora toccato$touched
Il campo è stato toccato$pristine
Il campo non è stato ancora modificato$dirty
Il campo è stato modificato$invalid
Il contenuto del campo non è valido$valid
Il contenuto del campo è valido
Il valore di ogni stato rappresenta un valore booleano ed è uno true
di false
.
Sintassi
<textarea ng-model="name"></textarea>
Gli elementi Textarea vengono indicati utilizzando il valore ng-model
dell'attributo.
Classi CSS
<textarea>
agli elementi all'interno di un'applicazione AngularJS vengono assegnate determinate classi . Queste classi possono essere utilizzate per applicare uno stile agli elementi textarea in base al loro stato.
Si aggiungono le seguenti classi:
ng-untouched
Il campo non è stato ancora toccatong-touched
Il campo è stato toccatong-pristine
Il campo non è stato ancora modificatong-dirty
Il campo è stato modificatong-valid
Il contenuto del campo è validong-invalid
Il contenuto del campo non è validong-valid-key
Una chiave per ogni convalida. Esempio:ng-valid-required
, utile quando ci sono più cose che devono essere convalidateng-invalid-key
Esempio:ng-invalid-required
Le classi vengono rimosse se il valore che rappresentano è false
.
Esempio
Applicare stili per elementi textarea validi e non validi, utilizzando CSS standard:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>