inputDirettiva AngularJS
Esempio
Un campo di input con associazione dati:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Definizione e utilizzo
AngularJS modifica il comportamento predefinito degli <input>elementi, ma solo se l' ng-modelattributo è 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 <input>elemento con un requiredattributo, ha lo $validstato impostato su
falsefinché è vuoto.
Forniscono anche il controllo statale. AngularJS mantiene lo stato corrente di tutti gli elementi di input.
I campi di input 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
o false.
Sintassi
<input ng-model="name">
Gli elementi di input vengono indicati utilizzando il valore ng-modeldell'attributo.
Classi CSS
<input>agli elementi all'interno di un'applicazione AngularJS vengono assegnate determinate classi . Queste classi possono essere utilizzate per definire lo stile degli elementi di input in base al loro stato.
Si aggiungono le seguenti classi:
ng-untouchedIl campo non è stato ancora toccatong-touchedIl campo è stato toccatong-pristineIl campo non è stato ancora modificatong-dirtyIl campo è stato modificatong-validIl contenuto del campo è validong-invalidIl contenuto del campo non è validong-valid-keyUna chiave per ogni convalida. Esempio:ng-valid-required, utile quando ci sono più cose che devono essere convalidateng-invalid-keyEsempio:ng-invalid-required
Le classi vengono rimosse se il valore che rappresentano è false.
Esempio
Applicare stili per elementi di input validi e non validi, utilizzando CSS standard:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>