Validare i dati con AngularJS

AngularJS ha un insieme di direttive utili nella validazione delle form. È importante premettere che il framework valida i controlli di una form prima di copiare il loro valore sulle variabili del modello a cui sono legate. Questo garantisce che il modello avrà sempre valori validi in base ai vincoli impostati sui controlli delle form. Ma vediamo come gestire la validazione delle form in Angular.

Per prima cosa è opportuno assegnare un nome alla form tramite l'attributo name. Questo consente di aggiungere allo scope l'istanza del controller automaticamente creato da Angular. Se associamo un nome anche ai controlli possiamo accedere ad essi come a proprietà dell'istanza della form.

Questi accorgimenti ci consentono di avere un maggior controllo sulla validazione della form e, ad esempio, di visualizzare messaggi personalizzati nel momento stesso dell'interazione dell'utente con essa.

Consideriamo ad esempio il seguente codice:

<form name="myForm">
	<div ng-show="myForm.$dirty">Form modificata</div>
	<div ng-show="myForm.$pristine">Form non modificata</div>
	<input type="text" ng-model="utente.nome" >
</form>

Analizzando le proprietà $dirty e $pristine dell'istanza della form possiamo controllare il suo stato e visualizzare il messaggio opportuno nel caso in cui sia stata modificata ($dirty) o se contiene i suoi valori iniziali ($pristine). Come è facile intuire, questa possibilità ci è consentita soltanto se abbiamo associato un nome alla form.

Un'altra accortezza da prendere in considerazione è l'uso dell'attributo novalidate. Questo evita che il browser possa considerare validi i dati presenti sulla form ignorando i controlli di validazione di AngularJS:

<form name="myForm" novalidate>

Per quanto riguarda la validazione dei singoli controlli di una form, Angular prevede una serie di direttive che corrispondono agli attributi standard di validazione come required, maxlength, pattern, etc. In linea di massima le corrispondenti direttive hanno il prefisso ng-: ng-required, ng-maxlength, ng-pattern, etc. A prima vista questa duplicazione potrebbe sembrare inutile. In realtà, le direttive di AngularJS offrono una maggiore flessibilità in quanto ad esse è possibile associare una qualsiasi espressione Angular.

Per comprendere i termini di questa flessibilità, consideriamo il seguente esempio:

<input type="checkbox" ng-model="utente.cittadinanzaItaliana" >
<input type="text" ng-model="utente.cittadinanza"
                   ng-required="!utente.cittadinanzaItaliana">

In esso abbiamo un checkbox per indicare se l'utente ha la cittadinanza italiana e una casella di testo per specificare la cittadinanza nel caso in cui l'utente non sia italiano. In questo caso, l'obbligatorietà della cittadinanza dipende dal valore del checkbox. Ecco che ng-required si mostra più flessibile del semplice required dell'HTML: nell'esempio infatti abbiamo potuto specificare una espressione booleana che attiva o disattiva dinamicamente l'obbligatorietà del valore della casella di testo.

Abbiamo già incontrato le proprietà $dirty e $pristine che ci segnalano rispettivamente se una form è stata modificata o se contiene i valori iniziali. Queste proprietà sono disponibili, oltre che per la form, anche per i singoli controlli. Insieme ad essi, le proprietà $valid e $invalid ci consentono di sapere se la form o il singolo controllo è valido o meno. Possiamo utilizzare le informazioni fornite da queste proprietà per migliorare graficamente l'interazione dell'utente con la form come nel seguente esempio:

<form name="myForm" novalidate>
	<input type="text"
	       ng-model="utente.nome"
		   name="nomeUtente"
		   ng-maxlength="20"
		   ng-required="true"
		   ng-class="{'': myForm.nomeUtente.$pristine,
		              'validClass': myForm.nomeUtente.$valid,
					  'invalidClass': myForm.nomeUtente.$invalid}">
	<div ng-show="myForm.nomeUtente.$invalid">
	Il nome utente è obbligatorio e non può superare i 20 caratteri
	</div>
</form>

Nell'esempio abbiamo impostato i vincoli sulla lunghezza massima e l'obbligatorietà del nome dell'utente ed abbiamo impostato l'applicazione dinamica delle classi CSS tramite la direttiva ng-class. Grazie a questa direttiva otterremo l'applicazione della classe adeguata in base allo stato corrente del controllo. Inoltre abbiamo inserito un <div> con un messaggio che indica all'utente i vincoli impostati sul controllo: tale messaggio verrà mostrato soltanto se il controllo non è valido.

Invece di visualizzare un unico messaggio di errore quando un controllo prevede più vincoli di validazione, possiamo indicare dei messaggi mirati sfruttando la proprietà $error. Essa è costituita da un oggetto le cui proprietà corrispondono al vincolo impostato ed hanno un valore booleano che ne indicano lo stato. Ad esempio, possiamo riscrivere il messaggio d'errore sulla validità del nome utente visto prima come mostrato di seguito:

<div ng-show="myForm.nomeUtente.$error.maxlength">
Il nome utente non può superare i 20 caratteri
</div>
<div ng-show="myForm.nomeUtente.$error.required">
Il nome utente è obbligatorio
</div>

Nell'esempio precedente abbiamo visto come applicare dinamicamente le classi CSS al controllo tramite la direttiva ng-class. Potremmo tuttavia fare a meno di questo assegnamento esplicito, dal momento che Angular applica implicitamente agli elementi delle classi CSS predefinite in base allo stato di validità. In particolare, le classi applicate sono:

Classe	Descrizione
ng-pristine	Classe applicata quando il form o il controllo non è ancora stato modificato
ng-dirty	Classe applicata quando il form o il controllo viene modificato
ng-valid	Classe applicata quando il form o il controllo è valido
ng-invalid	Classe applicata quando il form o il controllo non è valido

Angular non definisce le regole delle classi CSS, ma si limita ad applicarle agli elementi coinvolti nella validazione. Pertanto, se vogliamo sfruttare queste classi predefinite, possiamo limitarci a definire le regole CSS che preferiamo nel nostro foglio di stile senza necessità di specificare nulla sull'HTML. In altre parole, possiamo limitarci a scrivere il seguente codice HTML:

<input type="text" ng-model="utente.nome"
       name="nomeUtente" ng-maxlength="20"
	   ng-required="true">

e definire ad esempio delle classi per le condizioni di validità:

.ng-valid {border-color: green}
.ng-invalid {border-color: red}