Convalida modulo AngularJS con ngMessages

Quasi tutti i siti Web utilizzano moduli per eseguire attività diverse, come iscriversi agli utenti o ottenere le loro informazioni di contatto. È molto importante assicurarsi che un utente che sta compilando il modulo inserisca almeno informazioni valide nei campi di input.

È inoltre necessario mostrare un messaggio di errore dettagliato agli utenti in modo che possano compilare correttamente il modulo. Questo processo può diventare molto complicato quando devi gestire molti elementi del modulo, ognuno dei quali necessita dei propri messaggi di errore personalizzati. Per alleviare il dolore, Angular 1.3 ha aggiunto un nuovo modulo chiamato ngMessages per aiutare gli sviluppatori a convalidare i moduli con facilità.

Il modulo ngMessages ti dà la possibilità di visualizzare messaggi di errore personalizzati per gli utenti senza scrivere codice ripetitivo. In questo tutorial, imparerai come utilizzare questo modulo per convalidare i tuoi moduli. Imparerai anche come caricare i messaggi di errore esternamente e mostrerai solo i messaggi quando sono effettivamente necessari.

Un esempio di base

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

 Nome utente  Il nome utente deve contenere almeno 6 caratteri.
 Il nome utente deve avere al massimo 12 caratteri.
 Fornire un nome utente è obbligatorio.

Avrai anche bisogno del seguente codice JavaScript:

angular.module ('app', []);

Tutti gli altri elementi del modulo dovranno essere validati allo stesso modo. Ciò renderà il markup molto ripetitivo, aumentando le possibilità di errori. Se hai deciso di utilizzare ngMessages per convalidare lo stesso input di form, il markup sarebbe sembrato simile al seguente codice:

 Nome utente   Il nome utente deve contenere almeno 6 caratteri.
 Il nome utente deve avere al massimo 12 caratteri.
 Fornire un nome utente è obbligatorio.

Il codice JavaScript diventerà ora:

angular.module ('app', ['ngMessages']);

Qui, abbiamo usato il NG-messaggi direttiva per raggruppare insieme i messaggi di errore. Il valore passato al NG-messaggi direttiva segue lo schema formName.inputName. $ error. Nel nostro caso, questo valuta formValidation.username. $ error.

Allo stesso modo, potresti anche ottenere il valore di NG-messaggi direttiva per tutti gli altri campi. ngMessages si basa sul $ error oggetto esposto dalla direttiva ngModel per determinare se i messaggi di errore devono essere mostrati o nascosti sulla pagina web. Attraversa il $ error oggetto alla ricerca di una chiave che corrisponda ai valori di uno qualsiasi dei ng-messaggio direttive.

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

Convalida un modulo

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

 Nome utente   Il nome utente deve contenere almeno 6 caratteri.
 Il nome utente deve avere al massimo 12 caratteri.
 Fornire un nome utente è obbligatorio.
 Il nome utente può essere alfanumerico con un carattere di sottolineatura opzionale.
 
 Parola d'ordine   La password deve contenere almeno 6 caratteri.
 La password dovrebbe avere al massimo 12 caratteri.
 Fornire una password è obbligatorio.
 
 E-mail   Si prega di inserire un indirizzo email valido.
 Fornire un'e-mail è obbligatorio.

Come puoi vedere, il markup richiesto per la convalida di diversi elementi del modulo è molto simile. Un cambiamento importante in questo caso è l'aggiunta del ng-pattern direttiva. Il pattern che stiamo usando qui assicura che il nome utente inserito abbia solo caratteri alfanumerici e un carattere di sottolineatura. Il \ w nel / ^ \ W + $ / sta per caratteri di parole come A-Z, a-z, 0-9 e _.

Dovresti provare a digitare un nome utente diverso nel campo del nome utente. Dopo un po 'di tempo, noterai che il modulo non si lamenta di un carattere non alfanumerico se è stato digitato prima dei primi sei caratteri o dopo i primi 12 caratteri. Questo comportamento non è molto facile da usare.

Ad esempio, supponiamo che alcuni dei tuoi utenti inizino il loro nome utente con un punto esclamativo. Dovranno attendere fino a quando non avranno digitato altri sei caratteri per ottenere l'errore relativo all'utilizzo di caratteri alfanumerici. Sarà molto frustrante per loro iniziare a digitare nuovamente il nome utente dall'inizio.

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

Se hai fornito il messaggio di carattere minimo prima dell'errore alfanumerico, ngMessages attenderà che l'errore di carattere minimo sia stato risolto prima che mostri l'errore alfanumerico.

Ecco la stessa forma con i messaggi di errore presentati in un ordine diverso.

Puoi anche mostrare tutti i messaggi di errore applicabili a un utente utilizzando contemporaneamente NG-messaggi-multipla. Tuttavia, vedere più messaggi di errore non appena gli utenti iniziano a digitare in un campo di input può sopraffarli.

Riutilizzare messaggi di errore

C'è ancora molta ripetizione nel nostro markup. Se si desidera visualizzare lo stesso messaggio di errore per campi di input diversi, non ha senso ripeterlo per ognuno di essi. Il modulo ngMessages può aiutarti a scrivere messaggi di errore generici solo una volta e includerli nella tua forma ogni volta che se ne presenta la necessità. Ecco il markup per creare un modulo che visualizza messaggi di errore generici per gli utenti.

  Nome utente   Il nome utente può essere alfanumerico con un carattere di sottolineatura opzionale.
 Il nome utente non può essere più lungo di 12 caratteri.
 
 
 Parola d'ordine   
 
 E-mail   Questo campo è obbligatorio.
 Si prega di inserire un indirizzo email valido.

Proprio come nel caso precedente, la priorità di un messaggio è determinata dalla sua posizione nel modello. Puoi anche ignorare i messaggi generici forniti nel modello includendo un messaggio di errore personalizzato all'interno dei singoli campi. I messaggi di errore possono anche essere caricati da un file separato usando il seguente codice:

Mostrare solo gli errori quando richiesto

Puoi rendere il tuo modulo più user friendly mostrando solo i messaggi di errore quando un utente ha effettivamente commesso un errore durante la compilazione dei moduli. Ad esempio, puoi scegliere di mostrare solo l'errore di campo richiesto quando un utente salta effettivamente su un elemento di input.

Questo può essere ottenuto usando il ng-spettacolo o ng-se direttiva insieme a $ toccati e $ sporca. In caso di $ toccati, il messaggio di errore viene visualizzato non appena l'input perde il focus. In caso di $ sporca, il messaggio di errore compare non appena l'input diventa non valido.

Ecco la demo che mostra la differenza tra $ toccati e $ sporca.

Conclusione

In questo tutorial, hai imparato quanto sia facile convalidare l'input di diversi tipi di elementi del modulo usando ngMessages. Hai anche imparato a riutilizzare gli stessi messaggi di errore più volte per evitare la ripetizione e come dare la priorità ai diversi messaggi di errore.

Puoi anche utilizzare insieme ngMessages e ngAnimate per utilizzare animazioni personalizzate per mostrare o nascondere il tuo messaggio di errore. Un tutorial sull'uso del modulo ngAnimate sarà presto pubblicato su Envato Tuts +.

Se ci sono suggerimenti che vorresti condividere con altri lettori o se c'è qualche domanda che vorresti porre, fammelo sapere nei commenti.

Codice