Direttiva textarea di AngularJS

Definizione e uso

AngularJS modifica <textarea> Il comportamento predefinito dell'elemento, ma a condizione che ng-model proprietà esiste.

Forniscono binding dei dati, il che significa che sono parte del modello AngularJS e possono essere riferiti e aggiornati nelle funzioni AngularJS e nel DOM.

Forniscono convalida. Esempio: con required attributo <textarea> L'elemento, fintanto che è vuoto, il suo $valid Lo stato verrà impostato false.

Forniscono anche controllo dello stato. AngularJS salva lo stato corrente di tutti gli elementi area di testo.

Il campo area di testo ha i seguenti stati:

• $untouched Il campo non è stato toccato
• $touched Il campo è stato toccato
• $pristine Questo campo non è stato modificato
• $dirty Questo campo è stato modificato
• $invalid Il contenuto del campo è non valido
• $valid Il contenuto del campo è valido

Ogni valore di stato rappresenta un valore booleano, vero o falso.

Esempio

Area di testo con binding dei dati:

<textarea ng-model="myTextarea"></textarea>
<p>Il valore del campo area di testo è:</p>
<h1>{{myTextarea}}</h1>

Prova personalmente

Sintassi

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

Utilizzando ng-model Il valore dell'attributo per riferirsi all'elemento area di testo.

Classi CSS

All'interno dell'applicazione AngularJS <textarea> L'elemento riceve alcune classi. Queste classi possono essere utilizzate per impostare lo stile dell'elemento area di testo in base allo stato.

Sono state aggiunte le seguenti classi:

• ng-untouched Il campo non è stato toccato
• ng-touched Il campo è stato toccato
• ng-pristine Questo campo non è stato modificato
• ng-dirty Questo campo è stato modificato
• ng-valid Il contenuto del campo è valido
• ng-invalid Il contenuto del campo è non valido
• ng-valid-key Verifica un singolo chiave alla volta. Ad esempio:ng-valid-requiredè molto utile quando ci sono più cose da verificare
• ng-invalid-key Ad esempio:ng-invalid-required

Se il valore rappresentato dalla classe è falsequindi queste classi verranno eliminate.

Esempio

Applica stili CSS standard ai elementi di testo area validi e non validi:

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

Prova personalmente