Direttiva input di AngularJS

Definizione e uso

AngularJS modifica <input> comportamento predefinito dell'elemento, ma a condizione che l'attributo ng-model esista.

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 <input> elemento, finché è vuoto, il suo $valid Lo stato sarà impostato false.

Forniscono anche controllo degli stati. AngularJS memorizza lo stato corrente di tutti gli elementi di input.

Il campo di input 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, per true o false.

Esempio

Casella di input con binding dei dati:

<input ng-model="myInput">
<p>Il valore dell'input è:</p>
<h1>{{myInput}}</h1>

Prova da solo

Sintassi

<input ng-model="name">

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

Classi CSS

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

È stata aggiunta la seguente classe:

• 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è 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 standard CSS agli elementi di input validi e non validi:

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

Prova da solo