Ora che abbiamo imparato a conoscere il
supporto di convalida del modulo basato su modello in Angular nella lezione precedente,
applichiamo ciò che abbiamo imparato
al modulo di login che abbiamo progettato nell'esercizio precedente.
Faremo una semplice convalida del modulo per il modulo di login.
In particolare, verrà specificato il nome utente e la password come richiesto,
quindi verrà verificato che l'utente digiti le informazioni in questi campi
e sarà in grado di visualizzare i messaggi di errore quando i campi sono vuoti.
Procediamo con questa modifica all'applicazione in questo esercizio.
Per iniziare a questo esercizio,
andiamo al modulo di accesso qui,
che abbiamo nel modello di componenti di accesso qui.
Abbiamo già aggiunto l'attributo novalidate al modulo di login.
Quindi, aggiungiamo la variabile modello chiamata LogInform a questo modello,
e quindi impostalo su ngForm come abbiamo capito dalla lezione precedente qui.
Quindi, facendo questo,
stiamo specificando che questa variabile modello ci permette di tenere traccia dello stato del modulo.
Quindi, possiamo anche verificare lo stato valido o non valido per questo modulo.
Ora, inoltre, per ciascuno di questi input,
aggiungeremo allo stesso modo le variabili del modello corrispondenti qui.
Quindi, lasciami andare alla riga successiva qui,
e lì dirò username è ngModel.
Quindi, specificheremo anche questo come richiesto qui.
Allo stesso modo, per la password,
aggiungeremo nella variabile modello corrispondente qui come password è in ngModel,
e quindi specificare questo come richiesto qui.
Quindi, ora che abbiamo specificato le variabili del modello,
possiamo quindi effettuare alcuni dei controlli di convalida del modulo qui.
Ora, poiché stiamo specificando questo come richiesto,
ciò significa che se questi campi,
i campi di input sono vuoti,
allora l'errore richiesto sarà contrassegnato per questo.
Allo stesso modo, ora che abbiamo la variabile modello per il modulo,
possiamo facilmente usarlo per controllare e disabilitare il pulsante Invia qui sotto.
Quindi, per il pulsante Invia,
quello che facciamo qui è quello di utilizzare
il campo disabilitato qui,
e quindi imposteremo il campo disabilitato su
LogInfor.Form.Invalid.
Quindi, facendo questo,
disabiliteremo questo pulsante quando il modulo non è valido.
Quindi, in tal modo, l'utente non può nemmeno inviare il modulo quando il modulo contiene voce non valida.
Quindi, ad esempio, se il nome utente è vuoto o la password è vuota,
il modulo di accesso non sarà valido
e quindi l'utente non può inviare questo modulo.
Ora, questa è una parte della convalida del modulo che possiamo fare,
per cui possiamo impedire che il modulo venga inviato.
Inoltre, per ciascuno di questi campi,
possiamo anche visualizzare un messaggio di errore per
indicare il tipo di errore che si verifica in questo particolare campo.
Quindi, per fare questo,
a ciascuno di questi elementi del campo modulo,
aggiungeremo il tag mat-error lì,
e poi diremo stop NGif,
e diremo username.errors.
Quindi, si noti che abbiamo già dato questo modello una variabile chiamata username, in
modo che possiamo usare in username.errors se ci sono errori e
se questo tipo di errore è richiesto.
Quindi, se l'errore è un tipo richiesto di errore che è causa lì,
allora a quel punto,
possiamo specificare che l'errore corrispondente da visualizzare è il nome utente è richiesto.
Quindi, questo è l'errore che verrà visualizzato per questo campo qui.
Allo stesso modo, lasciami aggiungere lo stesso tipo di cosa per il campo della password qui.
Quindi, lasciami copiare e incollarlo qui,
e poi diremo password.errors.
Quindi, il messaggio sarà password è richiesto.
Quindi, aggiungendo questo,
mostreremo messaggi di errore sotto
questi campi quando il campo non contiene alcuna informazione.
Piccola correzione qui.
Dovrebbe essere il nome utente? errors.required qui,
e allo stesso modo, anche questo dovrebbe essere.required qui.
Quindi, con queste modifiche,
il mio componente di login è ora pronto
per eseguire la convalida del modulo e quindi visualizzare messaggi di errore.
Quindi, salviamo le modifiche e poi andiamo a dare un'occhiata all'applicazione aggiornata.
Andando alla nostra applicazione nel browser,
apriamo il modulo di accesso qui.
Quindi, puoi vedere che ora sia il nome utente che la password portano
una stella lì per indicare che sono entrambi richiesti.
Quindi, fammi digitare.
Quindi, qui, si vede che il modulo è valido perché contiene informazioni,
e quindi il pulsante Login sarà abilitato.
Permettetemi di rimuovere le informazioni dal campo della password,
e quindi si nota immediatamente che
l'errore è indicato qui dicendo che la password è richiesta.
Si noti inoltre che il pulsante Login non sarà più abilitato.
Sara' disabilitato. Quindi, non sarai in grado di inviare il modulo qui.
Ma nel momento in cui inserisco qualcosa nella password,
allora il pulsante Login sarà abilitato
e saremo in grado di inviare il modulo qui.
Analogamente per il nome utente.
Se rimuovo le informazioni sul nome utente
lì, vedrai l'errore visualizzato qui,
e inoltre vedrai che il pulsante Login non è abilitato a questo punto.
Quindi, è così che la convalida del modulo può essere eseguita in questo caso.
Quindi, come hai visto,
aggiungendo in forma semplice convalida alla nostra applicazione,
possiamo verificare che
i campi contengano le informazioni che si suppone di contenere,
e nel formato giusto.
Esamineremo un po 'di più di quale forma convalida in uno degli esercizi successivi,
specialmente per le forme reattive.
Con questo, completiamo questo esercizio.
Questo è un buon momento per fare un commit git
con i moduli basati sul modello di messaggio, parte due.