AngularJS Tutorial – Validation 101: – Form Validation

Validation: Capiamo gli stati delle form e dei campi

  • form status

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:

  1. $pristine
  2. $dirty
  3. $valid
  4. $invalid
  5. $submitted
  6. $touched
  7. $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!

Categorie

About the Author:

Viaggiatore seriale e aspirante fotografo, lavoro in ambito ICT da oltre 15 anni. Collaboro con Webyourmind sin da quando era ancora solo un'idea nella testa dei fondatori. Sono appassionato di nuove tecnologie e di tutto quello che il web offre.

0 Comments
0 Pings & Trackbacks

Lascia un commento

%d blogger hanno fatto clic su Mi Piace per questo: