Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Convalida dei Form in AngularJS con ngMessages

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called AngularJS Form Validation With ngMessages and ngAnimate.
How to Create Animations in AngularJS With ngAnimate

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

Quasi ogni sito utilizza forms per eseguire diversi compiti come registrare utenti o ottenere informazioni di contatto. È molto importante assicurarsi che un utente che compila il form immetta informazioni valide nei campi di immissione.

È inoltre necessario mostrare un messaggio di errore dettagliato agli utenti, in modo che essi possano compilare il form correttamente. Questo processo può diventare molto complicato quando avete a che fare con parecchi elementi del form, ognuno dei quali avrà bisogno di propri messaggi di errore personalizzati. Per facilitare il compito, Angular 1.3 ha aggiunto un nuovo modulo denominato ngMessages per aiutare gli sviluppatori a convalidare i forms con facilità.

Il modulo ngMessages vi dà la possibilità di visualizzare messaggi di errore personalizzati per gli utenti senza scrittura di codice ripetitivo. In questo tutorial, imparerete come utilizzare questo modulo per convalidare i forms. Imparerete anche come caricare esternamente i messaggi di errore e visualizzare i messaggi solo quando sono effettivamente richiesti.

Esempio di base

Cominciamo con la convalida di un campo di input singolo con e senza l'aiuto di ngMessages per vedere l'utilità di questo modulo. Senza l'utilizzo di ngMessages, il markup per l'elemento di input sarà simile al seguente codice:

Avrete inoltre bisogno del seguente codice JavaScript:

Tutti gli altri elementi del form dovranno essere convalidati nello stesso modo. Ciò renderà il markup molto ripetitivo, aumentando le possibilità di errori. Se aveste deciso di utilizzare ngMessages per convalidare lo stesso input del form, il markup sarebbe stato simile al codice riportato di seguito:

Il codice JavaScript adesso diventerà:

Qui abbiamo usato la direttiva ng-messages per raggruppare i messaggi di errore. Il valore passato alla direttiva ng-messages segue il pattern formName.inputName.$error. Nel nostro caso, questa restituisce formValidation.username.$error.

Allo stesso modo, potreste anche ottenere il valore della direttiva ng-messages per tutti gli altri campi. ngMessages si basa sull'oggetto $error esposto dalla direttiva ngModel per determinare se i messaggi di errore devono essere mostrati o nascosti nella pagina. Scorre l'oggetto $error alla ricerca di una chiave che corrisponda ai valori di una qualsiasi delle direttive ng-message.

Ecco un esempio funzionante che mostra il codice di convalida soprastante in azione:

Convalida di un Form

In questa sezione convalideremo un form con nome utente, password e campo email. Il markup per il form sarà simile al seguente:

Come potete vedere, il markup richiesto per la convalida di elementi di form diversi è molto simile. Un cambiamento importante in questo caso è l'aggiunta della direttiva ng-pattern. Il pattern che stiamo usando assicura che il nome utente immesso abbia solo caratteri alfanumerici e un underscore. Il \w in /^\w+$/ individua caratteri alfanumerici come A-Z, a-z, 0-9 e _.

Dovreste digitare un nome utente diverso nel campo nome utente. Dopo qualche tempo, noterete che il form non segnala se è stato digitato un carattere non alfanumerico prima dei sei caratteri iniziali o dopo i 12 caratteri iniziali. Questo comportamento non è molto user friendly.

Ad esempio, supponiamo che alcuni utenti abbiano all'inizio del loro username un punto esclamativo. Dovranno attendere fino a che non avranno digitato sei caratteri aggiuntivi per ottenere l'errore sull'utilizzo dei soli caratteri alfanumerici. Sarà molto frustrante per loro iniziare a digitare il nome utente nuovamente dall'inizio.

Per impostazione predefinita, ngMessages mostra all'utente solo un errore alla volta. Ecco perché il messaggio sui caratteri non validi non può essere visualizzato prima che un utente abbia scritto più di sei caratteri. Inoltre, ngMessages utilizza l'ordine in cui avete inserito i messaggi di errore come suggerimento per determinare la loro priorità.

Se avete fornito il messaggio minimo di caratteri prima dell'errore alfanumerico, ngMessages attenderà fino a quando non sarà stato risolto l'errore di carattere minimo prima di mostrare l'errore alfanumerico.

Di seguito abbiamo lo stesso form con i messaggi di errore presentati in un ordine diverso.

Potete inoltre visualizzare tutti i messaggi di errore applicabili a un utente un'unica volta utilizzando ng-messages-multiple. Tuttavia, vedere più messaggi di errore appena iniziano a digitare in un campo di input potrebbe infastidire gli utenti.

Riutilizzo di Messaggi di Errore

C'è ancora un sacco di ripetizione nel nostro markup. Se si desidera visualizzare lo stesso messaggio di errore per diversi campi di input, non ha senso ripeterlo per ciascuno di essi. Il modulo ngMessages consente di scrivere messaggi di errore generico solo una volta e includerli nel form ogni volta che ne ravvisi la necessità. Ecco il markup per creare un form che visualizzi messaggi di errore generico agli utenti.

Proprio come nel caso precedente, la priorità di un messaggio è determinata dal relativo posto nel template. Potete inoltre ignorare i messaggi generici forniti nel template includendo un messaggio di errore personalizzato all'interno di singoli campi. I messaggi di errore possono anche essere caricati da un file separato utilizzando il seguente codice:

Mostrare errori solo quando necessario

Potete rendere il form più user friendly mostrando i messaggi di errore solo quando un utente ha effettivamente commesso un errore durante la compilazione dei forms. Ad esempio, potete optare per visualizzare l'errore di campo obbligatorio solo quando un utente ignora un elemento di input.

Ciò può essere ottenuto utilizzando la direttiva ng-show o ng-if insieme a $touched e $dirty. Nel caso di $touched viene visualizzato il messaggio di errore non appena l'input perde lo stato attivo. Nel caso di $dirty il messaggio di errore compare non appena l'input diventa non valido.

Ecco la demo che mostra la differenza tra $touched e $dirty.

Conclusione

In questo tutorial, avete imparato quanto sia facile convalidare l'input di diversi tipi di elementi di form utilizzando ngMessages. Avete anche imparato come riutilizzare gli stessi messaggi di errore più volte per evitare la ripetizione e come dare priorità ai diversi messaggi d'errore.

Potete anche utilizzare insieme sia ngMessages che ngAnimate per utilizzare animazioni personalizzate per mostrare o nascondere il messaggio di errore. Un tutorial sull'utilizzo del modulo ngAnimate sarà presto pubblicato su Envato Tuts+.

Se ci sono dei suggerimenti che volete condividere con gli altri lettori o se avete qualsiasi domanda che volete porre, fatecelo sapere nei commenti.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.