Con una breve comprensione di Angular Reactive Forms,
passiamo all'esercizio successivo.
In questo esercizio, costruiremo
una forma reattiva angolare nell'applicazione Angular su cui abbiamo lavorato finora.
Lungo la strada, consolideremo la nostra comprensione delle Forme reattive angolari.
Per iniziare l'esercizio,
il primo passo che dobbiamo fare è importare
il modulo Angular Reactive Forms nel nostro modulo app.
Quindi, andiamo al modulo app,
e poi vediamo che avevamo già importato il modulo moduli in precedenza.
Ci sarà anche importare il modulo Angular Reactive Forms.
Quindi, ho intenzione di copiarlo, incollarlo qui,
e poi cambiarlo nel modulo Angular Reactive Forms.
Dopo averlo fatto, dobbiamo anche includerlo nel nostro decoratore.
Quindi, andando giù al decoratore qui,
ho intenzione di importare il modulo moduli reattivi nel decoratore.
Altri due moduli che abbiamo bisogno di importare per
il nostro modulo è MatSelectModule, e MatSlideToggleModule.
Il modulo select ci permette di utilizzare l'elemento select,
e slideToggle ci permette di utilizzare l'interruttore diapositiva nella nostra forma.
Quindi, per fare ciò, digiteremo in
importazione MatSelectModule da angulare/materiale/selezionare,
e importare MatSlideToggleModule da angular/materiale/slide-toggle,
e quindi abbiamo bisogno di aggiungerli al nostro decoratore ngModel nelle importazioni.
Quindi, andando laggiù,
lasciami importare MatSelectModule e MatSlideToggleModule lì.
Quindi, con queste modifiche,
il nostro modulo app è ora pronto per consentirci di
utilizzare il modulo moduli reattivi nella nostra applicazione.
Nel passaggio successivo,
quello che ho intenzione di fare è creare una classe qui chiamata come Feedback.
Quindi, lo creerò nella cartella condivisa nel nome del file feedback.ts.
Ora, questa è la struttura della classe che rappresenta
il modello di dati corrispondente al modello di modulo che
useremo all'interno della nostra applicazione angolare.
Quindi, creo la classe denominata feedback.
All' interno della classe Feedback,
ho intenzione di includere alcune proprietà;
nome, cognome,
quindi numero di telefono, Telnum, e-mail,
quindi accetto che è una variabile booleana,
proprietà booleana, contacttype che è della stringa di tipo.
Diventerà più chiaro per te perché includo tutti
questi quando guardiamo il design del modulo stesso.
Questa particolare classe di feedback corrisponde al feedback che
un utente può inviare sul nostro ristorante all'interno della nostra applicazione Angular.
Quindi, questo è il motivo per cui creo questa classe di feedback.
Stiamo andando a mappare questo nel modello di modulo in
uno dei componenti lì e anche insieme a quello,
esporterò una costante che è un array di stringhe chiamato
contacttype che come ho
detto è un array di stringhe contenente tre stringhe qui,
nessuno, Tel, ed e-mail.
Quindi, ora la nostra struttura del modello di dati è pronta.
Quindi, in seguito, quando sviluppiamo il nostro lato server,
saremo in grado di mappare questo in un dato che memorizziamo sul lato server.
Quindi, all'interno della nostra applicazione angolare,
questo forma il modello di dati che useremo per la nostra applicazione proprio come il piatto,
il leader, e la promozione che abbiamo sviluppato questa è un'altra classe che
ci permette di raggruppare insieme un insieme di proprietà in una classe qui.
Quindi, una volta completato questo,
procediamo con la creazione del modulo reattivo.
Creeremo il modulo reattivo nel nostro componente di contatto.
Quindi, andiamo al file component.ts del contatto,
e anche ci accingiamo a includere
il modulo corrispondente nel file modello componenti di contatto.
Così, nei componenti di contatto digitare file script,
quindi questo è dove stiamo andando a preparare il nostro modulo
come abbiamo visto il modulo reattivo è costruito principalmente
nel codice e poi mappato negli elementi del modulo nel file modello.
Quindi, qui ho intenzione di importare alcune classi.
Importerò FormBuilder,
quindi FormBuilder e validatori.
I validatori sarebbero usati per la convalida del modulo che sarà nel prossimo esercizio,
ma li importerò già al momento.
Questi sono importati dalla libreria di moduli angolari.
Quindi, una volta importato questo,
importeremo la classe
Feedback e la costante contacttype dal file condiviso/feedback
che abbiamo appena creato nel passaggio precedente.
Abbiamo bisogno di questo all'interno della nostra applicazione.
Ora, all'interno della mia classe qui,
ho intenzione di dichiarare alcune variabili chiamate feedbackForm che è del tipo FormGroup.
Questo è il modello di modulo che ospiterà
il modulo reattivo qui e poi
dichiarerò anche un feedback variabile del tipo Feedback,
quindi questo sarebbe il modello di dati corrispondente.
Più tardi questo valore di Feedback può essere recuperato da un server all'interno della nostra applicazione,
e quindi anche io dichiarerò il contacttype come una variabile
che è della matrice di stringhe contacttype.
Perché ho bisogno di fare uso di questo all'interno della nostra applicazione.
Per costruire il modulo reattivo all'interno del costruttore,
inietterei FormBuilder nel costruttore qui,
e creerei un metodo separato chiamato
CreateForm che invocherò all'interno del costruttore,
quindi quando questa classe viene creata la forma verrà creata.
Quindi, CreateForm sarà un metodo all'interno del quale creerò il modulo effettivo.
Quindi, lasciami aggiungere il metodo CreateForm qui.
Questa è solo convenienza che avrei potuto semplicemente
includere il codice direttamente nel costruttore stesso,
ma vedrai che potrebbero esserci motivi per cui
potresti aver bisogno di chiamare questo CreateForm da altre posizioni.
Quindi, è meglio metterlo in un metodo separato qui.
Quindi, creerò il modulo qui, modulo reattivo,
e quindi lo inserirò nella variabile feedbackForm che ho dichiarato in precedenza.
Quindi, per creare il modulo,
prenderò l'aiuto di FormBuilder,
l'FB che ho dichiarato al costruttore,
e quindi l'FB fornisce un metodo chiamato Group che mi permette di
definire un gruppo, un FormGroup qui.
Quindi, lì dentro, ora costruirò le parti del modulo lì.
Quindi, all'interno di questo gruppo,
ora posso includere i vari controlli di modulo lì.
Quindi, prima mettevo il nome,
poi il cognome.
Nota come i campi all'interno del mio modulo
rispecchiano strettamente i campi all'interno della mia classe di feedback.
Non devono corrispondere esattamente, ma se corrispondono,
il trasferimento dei dati tra
il modello di dati e i quattro modelli diventa molto più semplice.
Telnum che lascerò perché uh-
Ho aggiunto nome, cognome,
Telnum, e-mail, e d'accordo, e tipo di contatto,
che imposterò come nessuno per cominciare.
Ricordiamo che il tipo di contatto è un array di stringhe contenente tre di loro
quindi dovresti sceglierne uno e quindi mapparlo in questa proprietà qui.
Quindi, sceglierò questo come nessuno e poi messaggio,
che sarà il feedback che l'utente dà sul
nostro ristorante mappato in una stringa qui.
Quindi, questi sono i vari campi che faranno parte del nostro modulo qui.
Quindi, una volta che abbiamo la struttura del modulo in atto qui,
quindi si nota che quando questo metodo viene chiamato,
questo modulo sarà il modulo reattivo verrà creato nel codice qui.
Ora, dobbiamo mappare questo nella vista,
nel modello lì.
Quindi, lo faremo nel prossimo passo.
Quindi, ora, andando al nostro file modello,
nel file modello componente contatto,
scorreremo verso il basso e quindi includerlo nel
nostro file modello subito dopo questo div qui,
quindi abbiamo questo div nella nostra vista contatto che contiene le informazioni sulla posizione e così via.
Subito dopo, ho intenzione di creare un altro div all'interno del
quale ospiteremo la forma reattiva lì.
Permettetemi di applicare alcune cose di layout flessibile
qui al mio div.
Ora, questa dimensione del modulo come puoi vedere dovrebbe essere
una classe CSS che creerò un po 'più tardi.
All' interno di questo div, ho intenzione di ospitare il mio modulo.
Quindi, una volta inserito questo div nel mio file modello,
ora fammi iniziare con un'intestazione per questo.
Quindi, diremo: «Inviaci il tuo feedback».
Quindi, stai cercando il feedback dai visitatori del tuo sito.
Inizieremo a costruire il modulo.
Quindi, lasciami iniziare con il tag modulo
qui e poi costruiremo il modulo all'interno di questo tag modulo qui.
Quindi, per il modulo, la prima cosa che farò è applicare
il no validate perché la convalida verrà curata da angolare,
e quindi applicare anche un gruppo di moduli qui.
Quindi, nota che questo gruppo di moduli è quello che mi legherà nel modello di modulo reattivo
che ho creato nel mio codice qui.
Quindi, facendo questo,
stiamo legando in questa forma reattiva nel modello al modello di
modulo corrispondente nel nostro file dattiloscritto lì.
Quindi, il modo in cui lo facciamo è dichiarare il gruppo di moduli e il modulo di feedback.
Ti mostrerò come legare
gli elementi rimanenti
del modulo alle proprietà corrispondenti nel modello di modulo in breve tempo.
Quindi, dopo aver fatto questo,
mettiamo nei nostri elementi di forma in posizione all'interno di questo modello di modulo.
Quindi, dichiarerò una P qui e poi dentro
userò il campo mat-form qui,
a cui applicherò una classe CSS chiamata Half-Width,
e chiuderlo.
Quindi, questo metterebbe il mio primo controllo modulo qui.
Quindi, qui, inserirò l'input e poi applicherò il matInput dal materiale angolare qui.
Per legarlo nella proprietà all'interno del mio modello di modulo,
avrei bisogno di fare FormControlName
e il primo è il nome.
Quindi, in questo modo, questo input è ora legato alla proprietà del nome
che ho definito all'interno del mio modello di modulo che ho definito nel codice.
Il nome, e quindi definirò
il segnaposto come nome.
Quindi, come ci si aspetterebbe,
questo campo di input verrà utilizzato per digitare
il primo nome dall'utente, digitare il testo.
È interessante notare che non abbiamo
più il modello ng qui o nessuna delle variabili del modello e così via nella mia forma. Le
forme reattive funzionano in modo diverso.
Pertanto, come si vede nei moduli reattivi,
si esegue il mapping del gruppo di moduli e quindi si tenta i nomi dei controlli modulo.
Se si creano controlli modulo con la classe di controllo modulo,
è necessario dichiararlo come controllo modulo tra parentesi quadre e quindi
abbinarlo al controllo modulo corrispondente creato nel tipo scettico.
Ma ora dal momento che stiamo usando il generatore di moduli,
ho solo bisogno di legare nel gruppo di moduli come
questo nel mio modulo al modello di modulo corrispondente,
e quindi il resto di essi,
dichiaro come nome del controllo del modulo e quindi li abbino alle
proprietà corrispondenti nel
modello di controllo del modulo che ho nel mio dattiloscritto il modo del codice.
Quindi, questo creerà il campo del nome lì.
Fammi copiare questo.
Mi serve un cognome qui.
Quindi, ho intenzione di copiare questo e poi dire il nome del controllo del modulo è Cognome,
e il segnaposto è Cognome,
e del tipo, Testo, qui.
Avevo nome,
avevo cognome e se guardate il modello di controllo del modulo,
vedrete che dopo nome e cognome,
ho il numero di telefono come il prossimo,
quindi ho intenzione di incollare questo qui.
Quindi, il nome del controllo modulo qui è Telnum
e il segnaposto è Numero di telefono
e il tipo è Tel.
Mentre ci siamo,
legherò il Richiesto in questi anche se questo non è davvero richiesto.
Ma lasciatemi aggiungere questo.
Ora, numero di telefono, poi ho l'email.
Quindi, il campo successivo è Email,
e il segnaposto è Email,
e il tipo è anche.
Quindi, ora ho il nome,
il cognome, il numero di telefono e l'email.
La prossima cosa che ho intenzione di aggiungere è un interruttore diapositiva.
In precedenza usiamo la casella di controllo.
La slidetoggle è un altro controllo del modulo fornito dal materiale angolare,
che è un po 'diverso rispetto alla casella di controllo e
ho pensato che illustrerò con te usandolo nel modulo qui.
Ora, questo è dove userò una tabella per posizionare questi elementi.
Il motivo è che,
questi elementi sono difficili da posizionare senza utilizzare una tabella.
Quindi, all'interno del tavolo,
sono sicuro che tutti sapete come usare la tabella,
ho provato a posizionarli usando il
layout flessibile standard e non ho avuto molto successo con questo.
Quindi, invece ho fatto ricorso all'utilizzo di una tabella per posizionare questi due elementi nel mio modulo.
Quindi, mat-slide-toggle.
Quindi, la slidetoggle è come la casella di controllo,
puoi attivarla e disattivarla,
e questo è permesso selezionare un valore booleano qui.
Quindi, slidetoggle e FormControlName è d'accordo.
Se ricordi, eravamo d'accordo,
che era una proprietà booleana nel controllo modulo.
Allora, per questo, direi,
possiamo contattarla?
Ora, sarà più chiaro per voi quando vedrete la versione finale di
questo modulo per capire perché stiamo facendo questo.
In questo momento, metteremo tutte le parti nella mia forma reattiva.
La seconda parte utilizzerò una selezione,
che è supportata attraverso il componente mat-select nel materiale angolare.
Quindi, MD seleziona e per questo il
segnaposto, definirò come «Come?»
e formControlName con cui ho intenzione di legare questo è
«contacttype» e chiudere la selezione MD.
Quindi, questo mi permette di creare un elemento select nel mio modulo.
Quindi, l'elemento select è qualcosa che mi dà
un elenco a discesa da cui posso selezionarne uno.
Quindi, per creare l'elenco
a discesa, userò l'opzione tappetino disponibile come componente in materiale angolare.
Quindi, l'opzione mat-è inclusa all'interno del mat-select.
Quindi, per l'opzione,
ho intenzione di farlo* ngFor,
e sono sicuro che ricordi la direttiva ngFor di prima,
* ngFor «Let ctype of ContactType.»
Ora, vedi perché ho dichiarato
prima la variabile del tipo di contatto nel mio codice e poi direi, [value] = «ctype».
Quindi, sto impostando la mia opzione nella mia selezione qui e usando l'interpolazione,
digiterò ctype qui.
Quindi, questo mi darà un menu di opzione a discesa nella mia forma lì.
Quindi, questa è la parte successiva e poi finalmente,
dopo il tavolo, ho intenzione di mettere in un'area di testo qui.
Quindi, direi p e chiudi quella P. Per lo styling della forma reattiva,
l'elemento P mi consente di posizionare correttamente gli elementi.
Quindi, è per questo che lo sto usando.
Quindi, come ricorderai,
mat-form-field mi permette di
includere un contenitore di input qui e poi dentro lì definirò un'area di testo, a
cui applico
la direttiva MatInput a questo.
Quindi, il FormControlName, ho intenzione di dare come «messaggio».
Quindi, questo particolare elemento di forma consente all'utente di digitare
il messaggio di feedback per il mio ristorante.
Quindi, segnaposto «Il tuo feedback»,
e quindi darò all'area di testo una dimensione di
12 righe qui e quindi chiuderò l'area di testo.
Quindi, qui abbiamo un'area di testo con le 12 righe.
Quindi, questo completa la maggior parte del modulo.
Mi dispiace, questo dovrebbe essere fuori dal tavolo.
Abbiamo bisogno di un pulsante per inviare il modulo.
Quindi, proprio lì, includerò un pulsante del tipo = «submit» e
questo pulsante submit applicherò
il tappetino pulsante e applicherò anche la classe = «background-primary».
Mi hai visto applicare questo al pulsante nell'esercizio precedente anche,
simile tipo di pulsante.
Quindi, ora il mio modulo è quasi pronto.
È possibile aggiungere alcune classi CSS al componente contatto.
Le tre classi che ho usato sono a larghezza intera,
questo viene usato per impostare la dimensione degli elementi lì.
Quindi, a tutta larghezza 95 percento, mezza larghezza.
Quindi, questo mi consente di ridimensionare correttamente gli elementi, il
45% a mezza larghezza e quindi la dimensione del modulo.
Quindi, uso queste classi CSS nella mia forma.
Quindi con questo, salviamo le modifiche
e diamo una rapida occhiata al modulo nella nostra applicazione.
Andando al browser,
nella vista dei contatti,
mentre scorri verso il basso, ora vedi il modulo in posizione nella vista dei contatti qui.
Quindi, vedi l'inviaci il tuo feedback,
il nome, il cognome, il numero di telefono,
l'e-mail e l'interruttore diapositiva qui, in
modo da vedere l'interruttore diapositiva in posizione lì e poi questa è questa selezione.
La selezione mi permette di selezionare uno di questi tre.
Il valore predefinito è none e quindi l'area di testo qui,
mi consente di digitare i miei commenti di feedback qui e poi il pulsante di invio.
Quindi, questo completa il modulo reattivo nella
mia domanda, ma quando fai clic sul pulsante Invia,
non sarai in grado di inviare questo modulo.
Quindi, abbiamo bisogno di aggiungere il ngSubmit al nostro modulo nel modello
e quindi aggiungere un metodo nel nostro file di script di tipo.
Andando al nostro codice,
al modulo qui,
insieme al modulo novalidate FormGroup,
ho intenzione di aggiungere in un ngSubmit al modulo.
Chiamerò il metodo come metodo onSubmit.
Quindi, con questo, il mio modulo è ora pronto a inviare informazioni.
Ho bisogno di entrare nei componenti del contatto,
digitare il file di script e quindi creare il metodo onSubmit qui.
Quindi, nel metodo onSubmit,
si dà il caso che il modello di modulo sia esattamente lo stesso dei modelli di dati,
quindi posso semplicemente prendere il valore del modello di modulo.
Quindi, quando hai un modello di modulo come questo modulo di feedback,
il modulo di feedback fornisce una proprietà chiamata valore,
che mi consente di recuperare il valore corrente di tutti questi dal mio modulo di feedback.
Quindi questo formerà un oggetto JavaScript,
che posso quindi mappare nell'oggetto JavaScript di feedback.
Accade così che, entrambi hanno esattamente la stessa struttura,
il modello di dati e il modello di modulo.
Quindi, ecco perché sono in grado di caricare rapidamente il valore
direttamente nel modello di dati quando l'utente invia il modulo.
Se il modello di dati è leggermente diverso dal modello di modulo, è
necessario mappare in modo esplicito le singole proprietà e
che può essere fatto all'interno di questo metodo lì.
Solo per mostrarti che il modulo è inviato correttamente,
registrerò il valore sulla console, la console JavaScript.
Allora direi, questo.feedbackform.reset.
Il metodo di ripristino consente di ripristinare lo stato normale del modulo,
rimuovendo tutte le voci eseguite nel modulo.
Quindi, una volta
che l'utente invia, normalmente acquisisci i valori e quindi reimposta il modulo in modo
che l'ulteriore input possa essere fatto come modulo separato.
Quindi questo è il metodo di reset che useremo qui.
Quindi, con queste modifiche,
salviamo le modifiche e poi andiamo a vedere la nostra forma in azione.
Un' ultima piccola cosa che voglio aggiungere al mio modello è
mostrarti i valori del modulo all'interno del mio modulo stesso,
anche se in una vera applicazione,
non lo faresti, ma volevo solo illustrarti come
puoi vedere i valori del feedbackForm direttamente qui,
dal Modello FeedbackForm.
Quindi posso farcela qui dentro.
Posso dire feedbackform.value e convogliato attraverso json per mostrare qui.
Allo stesso modo, posso fare qui, feedbackForm.
C' è un'altra proprietà associata a tale modello di modulo denominata status,
che mi mostra lo stato del modulo in questo momento,
indipendentemente dal fatto che sia valido o non valido.
Quindi, ho intenzione di aggiungere questi due nel mio modulo qui, in
modo che questo venga mostrato nel mio modello.
Questo è solo per darti una vista istantanea di ciò che
il modello di modulo contiene nel mio file di script di tipo.
Salviamo le modifiche e andiamo a dare un'occhiata veloce al nostro modulo.
Tornando al nostro browser,
ora puoi vedere che i valori del modulo sono mostrati
qui e il modulo è in buona forma per consentirci di digitare i valori.
Quindi cerchiamo di digitare alcuni valori casuali qui e si può
immediatamente vedere il valore si riflette nel modello FeedbackForm lì,
proprio in alto e e-mail.
Non importa, digita qualcosa.
Quindi, questo interruttore a levetta,
puoi vedere che quando lo accendi e spegni,
il turno d'accordo cambia da false a true.
Quindi lascia che lo lasci a vero e poi la selezione.
Permettetemi di selezionare e-mail e poi si vede che il tipo di contatto qui è cambiato in e-mail.
Quindi, questo è il modo in cui sceglieresti di cambiare il valore.
Quindi, diciamo e-mail e poi qui dentro,
possiamo digitare il messaggio.
Qualche testo casuale qui e si sarebbe
in grado di vedere che il testo casuale si riflette nel messaggio lì.
Inviamo il modulo.
Quindi, quando si fa clic sul Invia si vede immediatamente nella console,
il valore viene stampato qui,
in questo oggetto qui.
Così si può navigare per vedere tutte le proprietà per quell'oggetto,
il modello di modulo di feedback.
Quindi, questa è un'illustrazione di una forma reattiva all'interno della nostra applicazione.
Questo completa questo esercizio.
In questo esercizio, abbiamo visto come possiamo creare
una forma reattiva all'interno della nostra applicazione angolare.
Questo è anche un buon punto in cui puoi fare un commit Git con il messaggio,
moduli reattivi parte uno.