Se sei un visual learner puoi guardare i video qui sotto che approfondiscono gli argomenti trattati nel post
In questo Tutorial AngularJS introdurremo la validazione nelle form e in particolare ci focalizzeremo sugli stati che possono assumere i campi e le for stesse.
Creare un robusto sistema di validazione dei dati inseriti dagli utenti può essere frustrante, noioso e molto pericloso se non fatto nel modo corretto. Ogni sviluppatore di interfacce grafiche sa che l’utente tipo compila le form senza prestare la dovuta attenzione ai dati che inserisce e aspettandosi che sia la pagina stessa a segnalare eventuali errori, per esempio, inserisce le date in modi fantasiosi o caratteri dove possono essere inseriti solo numeri e così via; ecco perchè AngularJS fornisce un valido e facile metodo di convalidare i dati e in questa serie di post vi mostrerò alcune utili tecniche per validare le form. Allora, cosa può fare AngularJS per noi? Inciamo a vedere gli strumenti che ci mette a disposizione per verificare gli stati di campi e della form nel suo complesso.
Prima di tutto per sfruttare la validazione di Angular dobbiamo disattivare la validazione nativa di HTML5 e questo si fa semplicemente aggiungendo l’attributo novalidate al tag form . come si vede nel codice di esempio qui sotto
Il tag <form> in AngularJS è una directive e così quando diamo un nome alla form viene creato un nuovo oggetto nello scope e tutti i campi dela form sono accessibili attraverso questo oggetto.
Tenete ben a mente questa cosa perchè esploreremo le proprietà della form (e dei suoi campi) utilizzando questo oggetto.
Angular aggiunge a runtime alcune proprietà all’oggetto form, queste proprietà rappresentano gli stati in cui può trovarsi la form e i suoi campi:
- $pristine
- $dirty
- $valid
- $invalid
- $submitted
- $touched
- $untouched
Esaminiamo insieme il significato di ognuna di queste proprietà: $pristine viene impostata a true se la form e tutti i suoi campi non sono stati ancora toccati, cioè se l’utente non ha ancora imputato nessun dato; $dirty invece indica il contrario di $pristine e quindi viene messa a true quando l’untente ha inserito almeno un campo, altrimenti assume il valore false.
Come potete facilmente indovinare la proprietà $valid ci dice se tutti i campi sono validi e che quindi non ci sono errori nella form. $invalid, al contrario, indica che uno o più campi contengono errori. Da notare che tutte queste due proprietà sono dei boleani e possono riferirsi sia alla form che ai singoli campi.
Il codice seguente è estratto dall’esempio del video:
Nell’esempio riportato qui sopra potete vedere, sulla prima riga, l’uso della property $valid per abilitare o disabilitare l’azione di submit della form: la proprietà $valid appartiene all’oggetto addEvent che altro non è se non la form stessa. Alla linea 7 invece potete vedere l’uso della proprietà $dirty e $invalid nella direttiva ng-show (in questo caso sono usate per mostrare onascondere blochi di HTML), notate che la proprietà $invalid appartiene al campo eventName della form addEventForm.
La proprietà $submitted è impostata a true quando la form viene inviata (in altre parole se l’utente preme il bottone submit), altrimenti è impostata a false.
Le ultime due proprietà sono $touched e $untouched. Queste si riferiscono ai campi della form: $touched diventa true quando l’utente sposta il focus sul campo, la $untouched è vera quando si verifica il caso contrario ovvero l’utente non ha sopostato il focus su quel preciso campo. In altre parole se l’utente clicca sul campo $touched diventa true e $untouched false.
In questo post abbiamo solo scalfito la superficie della validazione dei dati utente in AngularJS, restate sintonizzati per nuovi tutorial e trick: un altro post di questa serie arriverà presto.
Sottoscrivete la nostra newsletter e otterrete un extra sconto sul prezzo di listino del corso di AngularJS
.
Questo post è preso del nostro corso compelto AngularJS for the Real World – Learn by creating a WebApp. DAtegli un occhiata e fateci sapere cosa ne pensate!