Form, il binding dei controlli

AngularJS prevede alcune funzionalità che semplificano la gestione delle form HTML. Con poche impostazioni direttamente nell'HTML, alcune delle quali abbiamo già incontrato nelle puntate precedenti, possiamo gestire l'interazione dell'utente con il modello dei dati sottostante in maniera molto semplice. Vediamo quindi nel dettaglio le funzionalità messe a disposizione da Angular.

Come abbiamo avuto modo di vedere nel corso della guida, la direttiva ng-model è l'elemento fondamentale nel data binding tra i controlli di una form e il modello dei dati veicolato dallo scope del controller della view corrente.

Il seguente codice lega una casella di testo alla proprietà nome dell'oggetto utente definito nello scope e viceversa:

<input type="text" ng-model="utente.nome" >

Come già sappiamo, quindi, i dati inseriti dall'utente aggiornano automaticamente la corrispondente variabile del modello e, viceversa, eventuali aggiornamenti del modello si riflettono sul contenuto della casella di testo.

Possiamo applicare la direttiva ng-model a tutti i controlli di una form. Ad esempio, possiamo applicarla ad un checkbox come mostrato di seguito:

<input type="checkbox" ng-model="utente.cittadinanzaItaliana">

In questo caso la proprietà cittadinanzaItaliana assumerà il valore booleano true se il checkbox è selezionato, altrimenti avrà il valore false. Possiamo personalizzare il valore da assegnare al modello sottostante al checkbox specificando gli attributi ng-true-value e ng-false-value:

<input type="checkbox" ng-model="utente.cittadinanzaItaliana" ng-true-value="'si'" ng-false-value="'no'">

In questo caso abbiamo indicato che al posto del valore true vogliamo che sia assegnata la stringa si e al posto di false la stringa no.

Nota: le stringhe sono specificate con gli apici: questo perché a ng-true-value e ng-false-value possiamo associare una qualsiasi espressione, comprese chiamate di funzioni.

Anche il binding dei radio button è abbastanza semplice: è sufficiente associarli alla stessa variabile del modello e specificare per ciascuna il valore da assegnare:

<input type="radio" ng-model="utente.sesso" value="maschio">
<input type="radio" ng-model="utente.sesso" value="femmina">

Abbiamo già avuto modo di vedere come effettuare il binding di una select e delle sue opzioni. Aggiungiamo soltanto che, nel caso di abilitazione alla selezione multipla tramite l'attributo multiple, alla variabile del modello sarà assegnato l'array delle voci selezionate invece del singolo valore. In altre parole, se abbiamo il seguente binding:

<select ng-model="cittaSelezionate"
        ng-options="citta.nome for citta in elencoCitta"
		multiple="true">
</select>

la variabile cittaSelezionate sarà costituita da un array di oggetti citta corrispondenti agli elementi selezionati dall'utente.

Normalmente il binding tra il controllo e la corrispondente variabile di scope avviene mentre l'utente inserisce i dati. Ce ne possiamo rendere conto inserendo una espressione Angular accanto al controllo che stiamo editando:

<input type="text" ng-model="utente.nome" >
{{utente.nome}}

Man mano che inseriamo i caratteri del nome dell'utente nella casella di testo li vedremo comparire in corrispondenza dell'espressione Angular.

È possibile personalizzare questo comportamento specificando l'evento che aggiorna il modello dei dati tramite la direttiva ng-model-options. Ad esempio, il seguente codice indica che il modello dei dati deve essere aggiornato in corrispondenza dell'evento blur, cioè quando la casella di testo perde il focus:

<input type="text"
       ng-model="utente.nome"
	   ng-model-options="{updateOn: 'blur'}">
{{utente.nome}}

Possiamo indicare più eventi specificandoli in sequenza:

<input type="text"
       ng-model="utente.nome"
	   ng-model-options="{updateOn: 'blur mousedown'}">
{{utente.nome}}

In questo caso l'aggiornamento del modello avverrà sia in corrispondenza della perdita del focus sia quando viene cliccato il pulsante del mouse.

È possibile indicare un ritardo nell'aggiornamento come nel seguente esempio:

<input type="text"
       ng-model="utente.nome"
	   ng-model-options="{debounce: 500}">
{{utente.nome}}

Questo codice indica che l'aggiornamento del modello dei dati deve avvenire 500 millisecondi dopo l'aggiornamento del controllo. Possiamo infine combinare insieme le opzioni di aggiornamento come nel seguente esempio:

<input type="text"
       ng-model="utente.nome"
	   ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur:0}}">
{{utente.nome}}

In questo caso stiamo specificando che l'aggiornamento del modello deve avvenire sia con il comportamento predefinito (default), cioè all'inserimento dei dati, sia in corrispondenza dell'evento blur. Nel caso della modalità predefinita l'aggiornamento è ritardato di 500 millisecondi, mentre nel caso di blur l'aggiornamento è immediato.