Abbiamo affrontato le forme reattive in una delle lezioni precedenti,
dove abbiamo fatto due esercizi riguardanti le forme reattive, il
modo in cui le creiamo,
e poi anche fare una convalida di moduli di base su moduli reattivi.
Continueremo con il tema in questa lezione,
perché le forme reattive come suggerisce il nome,
hanno qualcosa a che fare con la programmazione reattiva come ci si potrebbe aspettare.
Ora, i moduli reattivi consentono anche di guardare le modifiche nei valori degli elementi del modulo,
utilizzando un osservabile che Angular rende disponibile chiamato ValueChanges.
In questo esercizio verrà utilizzato il valore osservabile ValueChanges,
al fine di tenere traccia delle modifiche apportate ai valori dei
vari elementi del modulo e quindi attivare immediatamente la convalida del modulo.
In questo esercizio faremo la maggior parte della convalida del modulo nel
codice piuttosto che nel modello stesso,
come abbiamo fatto con la convalida del modulo del reattore nel secondo esercizio delle forme reattive.
Andando a contact.component.tsfile,
stiamo andando ad aggiornare il modulo reattivo che abbiamo creato qui,
aggiungendo alcuni altri validatori per alcuni di questi campi.
Quindi, qui vedete che per il cognome e
il numero di telefono e e-mail abbiamo aggiunto i validatori richiesti.
Per il nome e il cognome,
aggiungerò un paio di altri validatori per
la lunghezza minima e la lunghezza massima.
Ora, se hai più di un validatore nel tuo modulo reattivo,
devi dichiararli usando un array lì dentro.
Quindi, questo deve essere racchiuso all'interno di un array qui.
Quindi, vedi che ho racchiuso il validatore richiesto all'interno di un array.
Ho intenzione di aggiungere un Validator, MinLength Validator.
Quindi, per la lunghezza minima specificherò due come lunghezza minima,
quindi il firstname dovrebbe contenere almeno due caratteri.
Anche la lunghezza massima che
aggiungerò come 25 caratteri.
Quindi, qui vedete che ora per il nome abbiamo tre diverse convalide,
tutte racchiuse in un array qui.
Validatori richiesti, Validatori MinLength
e Validatori MaxLength qui, 25.
Quindi, farò la stessa cosa anche per il mio cognome.
Quindi, lasciami copiare tutto questo raggio dei validatori qui,
e poi sostituisci questo con quel set di validatori.
Inoltre, per il numero di telefono,
come ricorderete nella versione precedente del modulo,
il numero di telefono era disposto ad accettare anche alfabeti,
ma questo non è corretto.
I numeri di telefono sono di solito numeri.
Quindi, questo è dove useremo un altro validatore
chiamato validatori modello.
Così, il modello Validator ci permette di specificare un modello per
i valori inseriti in quel particolare elemento del modulo,
e quindi controllare per assicurarsi che il valore segue il modello specificato.
Quindi, qui il modello che useremo è che il valore
dovrebbe contenere solo numeri tra zero e nove.
Per aggiungere il modello,
abbiamo bisogno di farlo nel file modello come vedremo in breve tempo.
Allo stesso modo, per l'e-mail,
avrò anche un altro validatore chiamato come validatore e-mail.
Quindi, aggiungeremo l'e-mail dei validatori.
Ciò significa anche che abbiamo bisogno di aggiungere un attributo
chiamato e-mail all'input nel nostro file modello.
Ora, con queste modifiche, la mia convalida del modulo è diventata più robusta in questo esercizio.
Ora, quando il modulo sperimenta cambiamenti in uno qualsiasi dei suoi elementi del modulo,
allora il framework angolare fornisce un osservabile chiamato come ValueChanges osservabile.
Quindi, userò il ValueChanges osservabile sul mio modulo di feedback.
Quindi, il ValueChanges osservabile.
Quindi, il ValueChanges osservabile può ora essere sottoscritto all'interno di questo particolare metodo.
Quindi, quando creiamo il modulo stesso,
ci iscriveremo al ValueChanges osservabile qui.
Ora, quando il ValueChanges,
quindi sottoscrivendo a questo osservabile,
all'interno della sottoscrizione specificherò cosa dovrebbe essere fatto quando il ValueChanges.
Quindi, quando ValueChanges otterrei alcuni dati qui,
dalla farm per indicare
quale particolare elemento del modulo ha sperimentato il cambiamento nel valore.
Quindi, quando ciò accade,
attiverò un metodo locale che implementerò chiamato
onValueChanged e quindi fornirò quei dati come parametro a questo metodo.
Ora, all'interno di questo metodo onValueChanged,
inizierò la convalida del modulo
e quindi definirò in modo appropriato i messaggi di errore del modulo in base
a ciò che questo oggetto dati che ottengo qui mi specificherà.
Inoltre, quando creo il modulo per la prima volta,
chiamerò il metodo onValueChanged senza alcun parametro
e questo verrebbe utilizzato per
reimpostare i messaggi di convalida del modulo.
Ora, come posso creare i messaggi di convalida del modulo?
Per fare ciò, definirò i miei messaggi di convalida del modulo completamente nel codice qui.
Quindi attraverso il codice,
adatterò i messaggi di convalida del modulo
e che verrebbero quindi utilizzati per visualizzare i messaggi di errore nel mio modello di modulo stesso.
Quindi, per farlo, quello che ho intenzione di fare è aggiungere alcuni oggetti JavaScript qui.
Uno degli oggetti JavaScript che ho intenzione di aggiungere è chiamato come errori di modulo.
Quindi, questo è un semplice oggetto JavaScript che
conterrà tutti gli errori per il particolare modulo qui.
Quindi all'interno degli errori del modulo,
userò quattro campi diversi
, nome, cognome.
Quindi, come ricorderete,
questi corrispondono ai quattro elementi del modulo su cui sto facendo la convalida del modulo, il
numero di telefono e l'e-mail.
Ora, perché definisco questo oggetto JavaScript qui?
Ora, questo oggetto JavaScript come vedi contiene quattro elementi qui.
Ora, ogni volta che eseguo la convalida del modulo,
ricorda che
ho già specificato che creerò un nuovo metodo chiamato onValueChange.
All' interno di OnValueChange, il modo in cui viene scritto il codice è che,
se viene rilevato
un errore, una stringa contenente il messaggio corrispondente a
tale errore verrà aggiunta a questo oggetto JavaScript.
Quindi, in questo modo all'interno del mio codice,
posso fare la convalida del modulo.
Ora, oltre a questo,
definirò alcuni messaggi di convalida.
Ora, questo particolare modello di fare le cose,
ho imparato leggendo la documentazione sulla convalida del modulo nel sito web angular.io.
Quindi, hanno un'intera documentazione su come fare la convalida del modulo e un link a cui è
disponibile nelle risorse aggiuntive di
questo capitolo e anche nei capitoli precedenti su moduli angolari.
Quindi, lì in quel particolare documento
prescrivono questo come un modo per fare la convalida dei moduli e ho trovato che è molto intuitivo.
Quindi, ho anche adottato lo stesso modello per fare la convalida del modulo nel codice.
Quindi, insieme a qui,
definirò i messaggi di convalida per tutti i possibili campi qui.
Quindi, per il campo del nome,
definirò alcuni messaggi di convalida qui, quindi direi,
«richiesto» e poi dire
«il nome è richiesto»
in questo modo, aggiungerò alcuni messaggi di convalida
qui e dirò,
«Il nome deve essere
lungo almeno 2 caratteri» e poi lo farò anche aggiungere,
«lunghezza massima» e il messaggio corrispondente sarebbe,
«Il nome non può essere più di 25".
Se hai un nome che corre in 25 caratteri,
devi davvero maledire i tuoi genitori per questo, credetemi,
uno dei miei secondi nomi è un lungo secondo nome,
e che non uso esplicitamente nei miei documenti.
Ma, posso capire il dolore,
se hai un nome lungo maggiore di 25 caratteri.
Le persone di alcuni stati nel sud dell'India hanno nomi lunghi,
incluso il mio stato, ehi,
divertiamoci un po' mentre ci siamo.
Ok, includero' anche la stessa cosa per il cognome.
Quindi, ho intenzione di modificare questo
e specificare la stessa cosa del cognome.
Quindi, come vedi all'interno del codice puoi specificare una serie di messaggi di errore.
Ora, se aggiungi una nuova convalida ai tuoi moduli,
tutto ciò che devi fare è,
vieni qui e aggiungi il nuovo messaggio di errore in
questo oggetto JavaScript qui e il tuo codice funzionerà bene, come tale.
Quindi, questo è il vantaggio di utilizzare questo modello per progettare la convalida nel codice.
Continuando, mi permetta di definire la convalida per il numero di telefono e
le due convalida per i numeri di telefono che accadrebbe è la «richiesta».
Quindi, ho solo intenzione di copiare il «richiesto» da lì,
e incollarlo qui,
e direi,
«Il numero di telefono è richiesto», e il prossimo messaggio di errore sarebbe per «pattern».
Quindi, il messaggio di errore dice,
«Il numero di telefono deve contenere solo numeri».
Quindi, questo è l'altro messaggio, allo stesso modo per e-mail.
Quindi, come puoi vedere i valori che sto usando qui
corrispondono ai nomi dei validatori che ho usato,
«mid length», «max length required», «pattern».
Quindi, allo stesso modo per l'e-mail,
vedresti «obbligatorio» e «Email'.
Quindi, ho solo intenzione di copiare il «richiesto» qui e dire, «L'e-mail è richiesta».
L' altro modello come ricordi è per e-mail e direi,
«Email non in formato valido».
Quindi, in genere se la tua email non contiene
un simbolo @ e caratteri su entrambi i lati del segno @,
allora questo non è un messaggio di posta elettronica valido.
Questo validatore e-mail è già integrato nel modulo moduli reattivi angolari.
Quindi, faremo uso dell'e-mail Validator qui.
Quindi, qui abbiamo tutti i messaggi di convalida definiti nel codice.
Quindi, questo rende molto facile estenderli per campi aggiuntivi se necessario e anche
aggiungere più messaggi di convalida per convalide aggiuntive
che potresti introdurre per ciascuno di questi campi modulo.
Inoltre, questo errore di modulo oggetto mi aiuta a tenere traccia di
tutti gli errori associati a ciascuno degli elementi nel mio telefono.
Quindi, attualmente controllo solo questi quattro elementi,
quindi è per questo che ho solo per questo.
Correzione minore, la «media lunghezza» dovrebbe essere min,
piccola 'l' e lunghezza massima anche con una piccola 'l',
analogamente anche per il cognome.
Ora, scriviamo il codice per il metodo sui valori modificati.
Quindi, ho intenzione di scrivere il metodo
qui, «ValueChanged» e quindi questo
prenderà un parametro, possibilmente.
Ecco perché ho messo un punto interrogativo dei dati,
il che significa che il parametro è facoltativo.
Quindi, la prima cosa che controllerò è, «questo modulo di feedback», il
che significa che se il modulo di feedback non è stato creato allora,
e se questo metodo viene chiamato,
allora dovresti semplicemente «tornare» senza nulla.
Quindi, definirò una
costante chiamata «questo
modulo di feedback» è solo per rendere facile definire il resto del codice,
quindi direi, «per il
campo const in questo.form errori.form».
Quindi, si noti che questo campo avrà questo.form errori,
l'oggetto errori modulo che abbiamo definito in precedenza.
Quindi, sentire significa che controllerò tutti e quattro.
Quindi, ogni volta che rilevo delle modifiche,
il nome, il cognome, il
numero di telefono e un'e-mail.
Quindi, questo è il motivo per cui questi quattro porteranno esattamente gli stessi nomi che abbiamo usato nel modulo qui,
e in modo che il codice scritto qui sarà semplice da lavorare con.
Quindi, ho intenzione di controllare ora i campi del modulo.
Quindi, vorrei prima
assicurarmi che nel caso in cui in precedenza ho allegato messaggi a questi campi
modulo, modulo errori oggetto lì,
quindi ho intenzione di cancellarli tutti.
Quindi, ecco perché se lo chiami senza parametri,
tutti i campi di errore del modulo verranno cancellati,
e quindi farei «control FormGet».
Quindi, si noti che sto usando quel campo stesso per fare un FormGet quindi,
sto ottenendo l'accesso a quel particolare campo modulo.
Quindi, si noti che prima stavamo facendo «feedbackform.this.feedbackform.get"firstname.»
e così via. Quindi, ho semplificato cosa in questa particolare costante che abbiamo
definito qui e poi dirò, «Se il controllo».
Quindi, il che significa che se il controllo non è nullo e «control.dirty».
Quindi, se quel particolare campo è già sporco
e non «controllo valido».
Quindi, significa che per ciascuno dei campi,
sto letteralmente controllando per vedere se è valido,
se è sporco,
e quindi se il controllo è già lì.
Quindi, ho intenzione di controllare per vedere che tipo di errori sono stati aggiunti a
questo particolare controllo dal modulo lì.
Quindi, qui dirò,
«messaggi const uguali
a questo.validation messages field».
Si noti come sto raccogliendo
tutti i messaggi di convalida corrispondenti a quel particolare campo nome
, cognome o telnum o e-mail,
quindi controllerò e vedrò se ho bisogno di aggiungerlo nel campo.
Allora, come faccio a farlo?
Quindi, lo facciamo per la chiave const in control.errors.
Quindi, si noti che questo controllo è il campo di feedback form.get e.error,
quindi sto controllando per vedere se ci sono errori lì.
Quindi, in tal caso,
aggiungerò questo campo degli errori del modulo.
Quindi, per quel particolare elemento nell'oggetto JavaScript che ho definito qui,
aggiungerei la chiave dei messaggi
più e lo spazio qui.
Quindi, ora qualunque sia il sondaggio di errore modulo
o il messaggio corrispondente verrà preso e allegato,
e quindi così il mio oggetto JavaScript errori modulo conterrà ora
tutti i messaggi di errore collegati insieme quando
questo particolare sui valori ha cambiato il metodo ratti.
Ora, questo particolare pezzo di codice che ho preso in prestito
dalla documentazione di convalida del modulo su angular.iu.
Ho scoperto che questo è un modo molto intuitivo di fare il controllo degli errori dei moduli.
Quindi, ho pensato perché non farne uso all'interno del nostro esercizio di forme reattive angolari.
Quindi, aggiungendo questo codice lì dentro.
Ora, la mia applicazione è pronta per eseguire la convalida del modulo per il mio modulo reattivo.
Quindi, ora il passo successivo è andare al contatto component.html,
il file modello e quindi aggiornare il file modello.
Quindi, andando a quel file modello,
ora andremo al modulo,
e il in questo modulo ora invece di fare tutti questi controlli nel codice,
ora possiamo semplificare molto del codice qui nel file modello qui.
Ora, invece di fare tutti questi controlli,
quello che ci rendiamo conto è che il modulo errori oggetto JavaScript nel
mio file dattiloscritto se ci sono errori, quindi
l'oggetto JavaScript degli errori modulo per quel particolare campo,
avrà tutti i messaggi di errore allegati ad esso.
Se non ci sono errori,
allora quei messaggi di errore non saranno lì.
Quindi, questo è quello che userò per verificare e
vedere se dovrei visualizzare l'errore del modulo o meno.
Quindi, per questo, invece di controllare tutto questo,
l'unica cosa che ho bisogno di controllare qui è formErrors firstname, è tutto.
Quindi, molto facile da controllare per gli errori qui.
Allo stesso modo, quindi questo intero codice ora viene semplificato qui,
e allo stesso modo quando controlli il messaggio qui,
cosa faremo, cambierò tutta questa cosa da
richiesto toccato a formErrors.firstName.
Questo è tutto. Se ciò esiste,
allora tutti i messaggi di errore corrispondenti a questo saranno già lì,
quindi ho solo bisogno di fare l'interpolazione e
quindi visualizzare formErrors.firstName qui,
semplice come quello.
Ora, si vede facendo
tutto il modulo di convalida degli errori e il codice e facendo tutti i controlli e così via nel codice,
si è già costruito i messaggi di errore che abbiamo bisogno di visualizzare.
Tutto quello che facciamo è prendere quel messaggio di errore e poi
metterlo nel modello qui, tutto qui.
Il codice modello diventa più semplificato in questo caso particolare,
e anche facendo la convalida del modulo utilizzando il codice dattiloscritto,
abbiamo semplificato il modello qui allo stesso tempo possiamo fare una
convalida del modulo più complicata nel nostro codice dattiloscritto.
Ho intenzione di andare avanti e fare lo stesso tipo di modifiche ai campi rimanenti qui,
quindi per il campo cognome,
ho intenzione di sostituire nuovamente questa intera cosa con formErrors.lastName.
Ora, di nuovo fare la stessa cosa per il numero di telefono.
Ora, di nuovo come vedete la struttura del modello diventa molto,
molto uniforme in questo caso.
Quindi, questo è anche un altro modo per semplificare
la struttura del tuo modello continuando al campo e-mail qui.
Ho intenzione di fare la stessa modifica anche al campo e-mail.
Quindi, direi formErrors.email
e sostituirlo con formatters.email.
Quindi, come puoi vedere,
il tuo codice modello si è semplificato in modo significativo rispetto a prima.
Con questo tutta la convalida degli errori che richiedo
è stata aggiunta nel mio modello e il mio modello è ora aggiornato,
quindi salviamo le modifiche.
Altre due cose che devo aggiungere sono l'attributo
chiamato email a questo particolare campo chiamato email.
Quindi, ricorda che abbiamo aggiunto l'email Validator qui.
Quindi, insieme al richiesto,
aggiungerò e-mail anche al campo di input qui.
Allo stesso modo, per il telnum,
usiamo il modello lì.
Quindi, ho intenzione di aggiungere il modello quindi questo è il campo di input per il telnum.
Quindi, all'interno del campo di input ho intenzione di aggiungere il modello è uguale a e
il modello che ho intenzione di aggiungere è
tra parentesi quadre da zero a nove,
e poi mettere una stella lì.
Quindi, il che significa che questo è qualcosa da zero a nove ripetuto più volte.
Quindi, il numero di telefono può contenere qualsiasi numero compreso tra zero e nove.
Qualsiasi numero di quei numeri.
Puoi anche inserire un minlength e maxlength sul campo telnum
se per il tuo particolare paese il numero di telefono ha un formato fisso,
puoi farlo anche tu.
Quindi, questo può essere fatto facilmente.
Ma, in questo esercizio,
non ho aggiunto la restrizione minlength e maxlength per il telnum qui.
Ora, che abbiamo fatto tutti gli aggiornamenti,
salviamo le modifiche e poi andiamo a dare un'occhiata al modulo nel browser.
Andando al browser ora,
scorriamo verso il basso fino al modulo qui.
Cerchiamo di digitare il nome e come si vede quando si digita un solo carattere,
quindi il messaggio di errore viene immediatamente visualizzato,
ma nel momento in cui si digita caratteri aggiuntivi che il messaggio di errore scompare.
Allo stesso modo, per il cognome.
Per il numero di telefono, se si tenta di digitare qualcosa di diverso dai numeri,
vengono visualizzati i messaggi di errore.
Quindi, è possibile digitare, in
modo simile per e-mail, in modo da vedere che il formato e-mail non valido verrà visualizzato.
Se non si dispone dell'e-mail, viene visualizzato anche il messaggio di errore.
Ma, nel momento in cui digiti qualcosa del genere,
allora questo è considerato un formato email valido, quindi sarà accettato.
Quindi, questo è l'insieme di messaggi di errore e la convalida del modulo
eseguita completamente nel codice come fatto in questo particolare esercizio.
Quindi, con questo, completiamo questo esercizio.
In questo esercizio, abbiamo visto l'uso del cambiamento di valore è osservabile,
e abbiamo anche visto come possiamo fare la convalida del modulo nel nostro codice dattiloscritto.
Questo completa questo esercizio.
Questo è un buon momento per fare un commit git con
i moduli reattivi del messaggio parte tre.