Abbiamo appena completato l'apprendimento delle forme guidate da modelli angolari e anche,
nell'esercizio, costruito la nostra prima forma guidata da modelli.
Ora, quando l'utente digita le informazioni nei campi modulo,
potremmo desiderare di convalidare i dati che l'utente digita in tali campi dati.
Nei primi giorni del web,
l'unico modo per controllare i dati era di spedire i dati
al server e quindi eseguire i controlli sul lato server,
quindi ottenere il risultato dal lato server.
Ma in questi giorni, con potenti framework lato client come Angular,
molta della convalida dei dati può essere facilmente eseguita sul lato client
stesso e possiamo facilmente rilevare molti degli errori sul lato client,
e quindi anche fornire indicazioni all'utente sugli errori.
Ora, questo è dove vedremo il supporto angolare per la
convalida del modulo e quindi come possiamo eseguire la convalida del modulo,
e quindi mostrare i messaggi di errore per l'utente nelle viste.
HTML5 viene già fornito con un supporto integrato per la convalida dei moduli.
Ma quando stiamo usando Angular per la nostra applicazione,
dobbiamo prima disattivare la convalida del modulo HTML5, in
modo che la responsabilità di fare la
convalida del modulo viene trasferita all'applicazione Angular.
Quindi, per farlo per il modulo,
come abbiamo visto nell'esercizio precedente,
includiamo l'attributo novalidate al tag form lì, in
modo che ciò assicuri che l'angolare
assume la responsabilità di eseguire la convalida del modulo.
In che modo Angular ci aiuta a fare la convalida del modulo?
Questo è ciò che esamineremo più dettagliatamente dopo.
Ogni volta che è necessario eseguire la convalida del modulo in Angular,
specialmente quando è necessario fare riferimento ai campi del modulo all'interno del modello,
è necessario l'aiuto delle variabili di riferimento del modello angolare.
Come specifichiamo una variabile di riferimento del modello?
La variabile di riferimento modello può essere specificata per
qualsiasi elemento associando una variabile template come questa.
Ad esempio, in questo caso per il modulo,
stiamo specificando il modulo di login uguale a ngForm.
Allo stesso modo, per un campo di input, ad esempio,
si direbbe barra,
o meglio #username è uguale a ngModel.
In questo caso, il modulo di accesso e il nome utente sono tutte variabili di riferimento del modello.
Queste variabili di riferimento modello possono quindi essere utilizzate all'interno del
nostro modello angolare per fare riferimento a questi campi.
Quindi, nel modello stesso,
puoi controllare gli stati di controllo per
quei campi, incluse cose come se il campo è valido,
se è sporco
o ha alcuni errori.
Sfrutteremo questo supporto che Angular fornisce al fine di fare la convalida del modulo.
Come ho detto, useremo
le variabili di riferimento del modello per raccogliere lo stato di controllo per verificare le informazioni.
Quindi, ad esempio, puoi dire username.pristine all'interno del tuo modello.
Quindi, questo si riferisce al controllo dello stato,
se il particolare controllo è nello stato incontaminato, il
che significa che non è stato toccato e modificato dall'utente finora.
Lo sporco è opposto a incontaminato, il
che significa che quando un campo è sporco,
significa che il campo è stato modificato dall'utente in passato.
Allo stesso modo, lo stato di controllo valido e non valido
ci consente di verificare se le informazioni contenute in quel campo sono valide o meno,
a seconda delle specifiche del controllo
per la validità o lo stato non valido di quel particolare campo.
Quindi, ad esempio, è possibile verificare se è stato dichiarato un campo come richiesto, il
che significa che ci si aspetta che l'utente
digiti almeno alcune informazioni nel campo.
L' assenza di informazioni all'interno del campo nel modulo indica che il campo non è valido.
Allo stesso modo, è possibile specificare la terraferma o la lunghezza massima di un valore di campo, in
modo da poter facilmente verificare se il numero di caratteri
all'interno di un campo è circa la lunghezza principale,
o inferiore alla lunghezza massima e così via.
Nell' esercizio che segue,
applicheremo questi vari approcci di convalida dei moduli per
il nostro modulo basato su modelli che abbiamo progettato nell'esercizio precedente.
Ad esempio, nel modulo
puoi disabilitare il pulsante di invio controllando
se tale modulo è valido o meno.
Quindi, in questo caso, associerai il disabilitato
e lo imposterai uguale al modulo di accesso.form.invalid,
significa che quando il modulo non è valido,
questo pulsante sarà disabilitato in questo caso.
Quindi, l'utente non sarà autorizzato a inviare le informazioni attraverso questo particolare modulo.
Quindi, questo è un modo per garantire che le
voci errate non vengano inviate dall'utente attraverso il modulo.
Analogamente, per campi specifici,
è possibile verificare se il campo è stato compilato o meno.
Quindi, se si specifica che un particolare campo è richiesto
specificando l'attributo richiesto per il campo di input, è
possibile verificare se c'è un errore
del tipo richiesto generato per il particolare elemento campo lì.
Quindi, nel tuo codice, ad esempio,
puoi persino specificare di informare l'utente sul
fatto che un particolare campo non è corretto.
Si utilizza l'errore di tappetino per indicare che.
Quindi, il tag di errore mat-, che proviene, di
nuovo, dal supporto del modulo materiale angolare come vedi qui,
se il NGIF risulta essere vero,
allora quel messaggio verrà visualizzato sotto nel campo di input lì,
e simile al campo di input,
sarà contrassegnato come rosso sullo schermo.
Quindi, questo è qualcosa che stai per controllare e
garantire e anche consegnare messaggi di errore all'utente.
Nell' esercizio che segue,
applicheremo questo approccio per controllare il nome utente e la password.
Specificheremo che questi campi sono obbligatori e se l'utente
non digita alcuna informazione in questi campi dopo che il campo è stato toccato,
allora ci assicureremo che venga visualizzato il messaggio di errore appropriato per l'utente.
Quindi, con questa rapida comprensione della convalida del modulo in Angular,
passiamo all'esercizio,
dove controlleremo come possiamo fare una semplice convalida del modulo per
il nostro modulo di login e quindi essere in grado di visualizzare messaggi di errore.
Torneremo di nuovo per formare la convalida in uno degli esercizi successivi,
dopo aver appreso di più sul supporto reattivo in Angular.