1
00:00:03,550 --> 00:00:08,265
Con una breve comprensione di Angular Reactive Forms,

2
00:00:08,265 --> 00:00:10,670
passiamo all'esercizio successivo.

3
00:00:10,670 --> 00:00:12,800
In questo esercizio, costruiremo

4
00:00:12,800 --> 00:00:18,705
una forma reattiva angolare nell'applicazione Angular su cui abbiamo lavorato finora.

5
00:00:18,705 --> 00:00:25,480
Lungo la strada, consolideremo la nostra comprensione delle Forme reattive angolari.

6
00:00:25,480 --> 00:00:28,435
Per iniziare l'esercizio,

7
00:00:28,435 --> 00:00:31,560
il primo passo che dobbiamo fare è importare

8
00:00:31,560 --> 00:00:35,860
il modulo Angular Reactive Forms nel nostro modulo app.

9
00:00:35,860 --> 00:00:38,020
Quindi, andiamo al modulo app,

10
00:00:38,020 --> 00:00:42,160
e poi vediamo che avevamo già importato il modulo moduli in precedenza.

11
00:00:42,160 --> 00:00:46,540
Ci sarà anche importare il modulo Angular Reactive Forms.

12
00:00:46,540 --> 00:00:49,145
Quindi, ho intenzione di copiarlo, incollarlo qui,

13
00:00:49,145 --> 00:00:53,810
e poi cambiarlo nel modulo Angular Reactive Forms.

14
00:00:53,810 --> 00:00:57,770
Dopo averlo fatto, dobbiamo anche includerlo nel nostro decoratore.

15
00:00:57,770 --> 00:01:00,440
Quindi, andando giù al decoratore qui,

16
00:01:00,440 --> 00:01:05,235
ho intenzione di importare il modulo moduli reattivi nel decoratore.

17
00:01:05,235 --> 00:01:09,365
Altri due moduli che abbiamo bisogno di importare per

18
00:01:09,365 --> 00:01:14,245
il nostro modulo è MatSelectModule, e MatSlideToggleModule.

19
00:01:14,245 --> 00:01:19,035
Il modulo select ci permette di utilizzare l'elemento select,

20
00:01:19,035 --> 00:01:24,360
e slideToggle ci permette di utilizzare l'interruttore diapositiva nella nostra forma.

21
00:01:24,360 --> 00:01:26,750
Quindi, per fare ciò, digiteremo in

22
00:01:26,750 --> 00:01:35,670
importazione MatSelectModule da angulare/materiale/selezionare,

23
00:01:36,890 --> 00:01:45,220
e importare MatSlideToggleModule da angular/materiale/slide-toggle,

24
00:01:47,110 --> 00:01:55,195
e quindi abbiamo bisogno di aggiungerli al nostro decoratore ngModel nelle importazioni.

25
00:01:55,195 --> 00:01:57,145
Quindi, andando laggiù,

26
00:01:57,145 --> 00:02:02,840
lasciami importare MatSelectModule e MatSlideToggleModule lì.

27
00:02:02,840 --> 00:02:04,685
Quindi, con queste modifiche,

28
00:02:04,685 --> 00:02:08,240
il nostro modulo app è ora pronto per consentirci di

29
00:02:08,240 --> 00:02:13,465
utilizzare il modulo moduli reattivi nella nostra applicazione.

30
00:02:13,465 --> 00:02:14,920
Nel passaggio successivo,

31
00:02:14,920 --> 00:02:22,105
quello che ho intenzione di fare è creare una classe qui chiamata come Feedback.

32
00:02:22,105 --> 00:02:28,265
Quindi, lo creerò nella cartella condivisa nel nome del file feedback.ts.

33
00:02:28,265 --> 00:02:34,790
Ora, questa è la struttura della classe che rappresenta

34
00:02:34,790 --> 00:02:38,210
il modello di dati corrispondente al modello di modulo che

35
00:02:38,210 --> 00:02:41,840
useremo all'interno della nostra applicazione angolare.

36
00:02:41,840 --> 00:02:50,620
Quindi, creo la classe denominata feedback.

37
00:02:51,210 --> 00:02:53,500
All' interno della classe Feedback,

38
00:02:53,500 --> 00:02:57,160
ho intenzione di includere alcune proprietà;

39
00:02:57,970 --> 00:03:02,830
nome, cognome,

40
00:03:02,830 --> 00:03:10,730
quindi numero di telefono, Telnum, e-mail,

41
00:03:10,730 --> 00:03:20,440
quindi accetto che è una variabile booleana,

42
00:03:20,440 --> 00:03:28,385
proprietà booleana, contacttype che è della stringa di tipo.

43
00:03:28,385 --> 00:03:31,730
Diventerà più chiaro per te perché includo tutti

44
00:03:31,730 --> 00:03:36,145
questi quando guardiamo il design del modulo stesso.

45
00:03:36,145 --> 00:03:42,350
Questa particolare classe di feedback corrisponde al feedback che

46
00:03:42,350 --> 00:03:48,045
un utente può inviare sul nostro ristorante all'interno della nostra applicazione Angular.

47
00:03:48,045 --> 00:03:51,800
Quindi, questo è il motivo per cui creo questa classe di feedback.

48
00:03:51,800 --> 00:03:55,865
Stiamo andando a mappare questo nel modello di modulo in

49
00:03:55,865 --> 00:04:00,650
uno dei componenti lì e anche insieme a quello,

50
00:04:00,650 --> 00:04:05,920
esporterò una costante che è un array di stringhe chiamato

51
00:04:05,920 --> 00:04:12,380
contacttype che come ho

52
00:04:12,380 --> 00:04:19,410
detto è un array di stringhe contenente tre stringhe qui,

53
00:04:25,060 --> 00:04:29,460
nessuno, Tel, ed e-mail.

54
00:04:29,750 --> 00:04:34,875
Quindi, ora la nostra struttura del modello di dati è pronta.

55
00:04:34,875 --> 00:04:39,019
Quindi, in seguito, quando sviluppiamo il nostro lato server,

56
00:04:39,019 --> 00:04:45,555
saremo in grado di mappare questo in un dato che memorizziamo sul lato server.

57
00:04:45,555 --> 00:04:47,690
Quindi, all'interno della nostra applicazione angolare,

58
00:04:47,690 --> 00:04:53,705
questo forma il modello di dati che useremo per la nostra applicazione proprio come il piatto,

59
00:04:53,705 --> 00:04:58,850
il leader, e la promozione che abbiamo sviluppato questa è un'altra classe che

60
00:04:58,850 --> 00:05:04,375
ci permette di raggruppare insieme un insieme di proprietà in una classe qui.

61
00:05:04,375 --> 00:05:06,380
Quindi, una volta completato questo,

62
00:05:06,380 --> 00:05:10,365
procediamo con la creazione del modulo reattivo.

63
00:05:10,365 --> 00:05:16,095
Creeremo il modulo reattivo nel nostro componente di contatto.

64
00:05:16,095 --> 00:05:20,780
Quindi, andiamo al file component.ts del contatto,

65
00:05:20,780 --> 00:05:22,520
e anche ci accingiamo a includere

66
00:05:22,520 --> 00:05:26,400
il modulo corrispondente nel file modello componenti di contatto.

67
00:05:26,400 --> 00:05:29,475
Così, nei componenti di contatto digitare file script,

68
00:05:29,475 --> 00:05:32,135
quindi questo è dove stiamo andando a preparare il nostro modulo

69
00:05:32,135 --> 00:05:35,555
come abbiamo visto il modulo reattivo è costruito principalmente

70
00:05:35,555 --> 00:05:43,265
nel codice e poi mappato negli elementi del modulo nel file modello.

71
00:05:43,265 --> 00:05:49,360
Quindi, qui ho intenzione di importare alcune classi.

72
00:05:49,360 --> 00:05:52,655
Importerò FormBuilder,

73
00:05:52,655 --> 00:06:00,055
quindi FormBuilder e validatori.

74
00:06:00,055 --> 00:06:05,890
I validatori sarebbero usati per la convalida del modulo che sarà nel prossimo esercizio,

75
00:06:05,890 --> 00:06:10,125
ma li importerò già al momento.

76
00:06:10,125 --> 00:06:15,735
Questi sono importati dalla libreria di moduli angolari.

77
00:06:15,735 --> 00:06:19,300
Quindi, una volta importato questo,

78
00:06:19,300 --> 00:06:29,790
importeremo la classe

79
00:06:29,790 --> 00:06:38,360
Feedback e la costante contacttype dal file condiviso/feedback

80
00:06:38,360 --> 00:06:41,415
che abbiamo appena creato nel passaggio precedente.

81
00:06:41,415 --> 00:06:44,850
Abbiamo bisogno di questo all'interno della nostra applicazione.

82
00:06:44,850 --> 00:06:49,455
Ora, all'interno della mia classe qui,

83
00:06:49,455 --> 00:07:00,310
ho intenzione di dichiarare alcune variabili chiamate feedbackForm che è del tipo FormGroup.

84
00:07:00,410 --> 00:07:07,475
Questo è il modello di modulo che ospiterà

85
00:07:07,475 --> 00:07:11,960
il modulo reattivo qui e poi

86
00:07:11,960 --> 00:07:17,270
dichiarerò anche un feedback variabile del tipo Feedback,

87
00:07:17,270 --> 00:07:19,745
quindi questo sarebbe il modello di dati corrispondente.

88
00:07:19,745 --> 00:07:27,930
Più tardi questo valore di Feedback può essere recuperato da un server all'interno della nostra applicazione,

89
00:07:27,930 --> 00:07:34,205
e quindi anche io dichiarerò il contacttype come una variabile

90
00:07:34,205 --> 00:07:41,045
che è della matrice di stringhe contacttype.

91
00:07:41,045 --> 00:07:44,860
Perché ho bisogno di fare uso di questo all'interno della nostra applicazione.

92
00:07:44,860 --> 00:07:48,675
Per costruire il modulo reattivo all'interno del costruttore,

93
00:07:48,675 --> 00:07:58,605
inietterei FormBuilder nel costruttore qui,

94
00:07:58,605 --> 00:08:03,605
e creerei un metodo separato chiamato

95
00:08:03,605 --> 00:08:08,950
CreateForm che invocherò all'interno del costruttore,

96
00:08:08,950 --> 00:08:12,300
quindi quando questa classe viene creata la forma verrà creata.

97
00:08:12,300 --> 00:08:17,870
Quindi, CreateForm sarà un metodo all'interno del quale creerò il modulo effettivo.

98
00:08:17,870 --> 00:08:24,060
Quindi, lasciami aggiungere il metodo CreateForm qui.

99
00:08:24,060 --> 00:08:27,590
Questa è solo convenienza che avrei potuto semplicemente

100
00:08:27,590 --> 00:08:31,250
includere il codice direttamente nel costruttore stesso,

101
00:08:31,250 --> 00:08:34,760
ma vedrai che potrebbero esserci motivi per cui

102
00:08:34,760 --> 00:08:41,060
potresti aver bisogno di chiamare questo CreateForm da altre posizioni.

103
00:08:41,060 --> 00:08:47,240
Quindi, è meglio metterlo in un metodo separato qui.

104
00:08:47,240 --> 00:08:50,830
Quindi, creerò il modulo qui, modulo reattivo,

105
00:08:50,830 --> 00:08:56,775
e quindi lo inserirò nella variabile feedbackForm che ho dichiarato in precedenza.

106
00:08:56,775 --> 00:08:58,335
Quindi, per creare il modulo,

107
00:08:58,335 --> 00:09:02,215
prenderò l'aiuto di FormBuilder,

108
00:09:02,215 --> 00:09:05,145
l'FB che ho dichiarato al costruttore,

109
00:09:05,145 --> 00:09:10,760
e quindi l'FB fornisce un metodo chiamato Group che mi permette di

110
00:09:10,760 --> 00:09:16,910
definire un gruppo, un FormGroup qui.

111
00:09:16,910 --> 00:09:23,040
Quindi, lì dentro, ora costruirò le parti del modulo lì.

112
00:09:23,040 --> 00:09:24,845
Quindi, all'interno di questo gruppo,

113
00:09:24,845 --> 00:09:28,775
ora posso includere i vari controlli di modulo lì.

114
00:09:28,775 --> 00:09:34,050
Quindi, prima mettevo il nome,

115
00:09:34,050 --> 00:09:44,200
poi il cognome.

116
00:09:45,910 --> 00:09:51,175
Nota come i campi all'interno del mio modulo

117
00:09:51,175 --> 00:09:56,460
rispecchiano strettamente i campi all'interno della mia classe di feedback.

118
00:09:56,460 --> 00:09:59,790
Non devono corrispondere esattamente, ma se corrispondono,

119
00:09:59,790 --> 00:10:01,630
il trasferimento dei dati tra

120
00:10:01,630 --> 00:10:06,550
il modello di dati e i quattro modelli diventa molto più semplice.

121
00:10:06,550 --> 00:10:12,500
Telnum che lascerò perché uh-

122
00:10:13,040 --> 00:10:15,800
Ho aggiunto nome, cognome,

123
00:10:15,800 --> 00:10:25,140
Telnum, e-mail, e d'accordo, e tipo di contatto,

124
00:10:25,550 --> 00:10:31,360
che imposterò come nessuno per cominciare.

125
00:10:31,360 --> 00:10:35,710
Ricordiamo che il tipo di contatto è un array di stringhe contenente tre di loro

126
00:10:35,710 --> 00:10:40,015
quindi dovresti sceglierne uno e quindi mapparlo in questa proprietà qui.

127
00:10:40,015 --> 00:10:44,920
Quindi, sceglierò questo come nessuno e poi messaggio,

128
00:10:44,920 --> 00:10:49,120
che sarà il feedback che l'utente dà sul

129
00:10:49,120 --> 00:10:53,605
nostro ristorante mappato in una stringa qui.

130
00:10:53,605 --> 00:10:59,765
Quindi, questi sono i vari campi che faranno parte del nostro modulo qui.

131
00:10:59,765 --> 00:11:04,370
Quindi, una volta che abbiamo la struttura del modulo in atto qui,

132
00:11:04,370 --> 00:11:07,525
quindi si nota che quando questo metodo viene chiamato,

133
00:11:07,525 --> 00:11:12,455
questo modulo sarà il modulo reattivo verrà creato nel codice qui.

134
00:11:12,455 --> 00:11:16,595
Ora, dobbiamo mappare questo nella vista,

135
00:11:16,595 --> 00:11:17,900
nel modello lì.

136
00:11:17,900 --> 00:11:21,470
Quindi, lo faremo nel prossimo passo.

137
00:11:21,470 --> 00:11:26,130
Quindi, ora, andando al nostro file modello,

138
00:11:26,130 --> 00:11:31,415
nel file modello componente contatto,

139
00:11:31,415 --> 00:11:36,159
scorreremo verso il basso e quindi includerlo nel

140
00:11:36,159 --> 00:11:42,910
nostro file modello subito dopo questo div qui,

141
00:11:42,910 --> 00:11:50,325
quindi abbiamo questo div nella nostra vista contatto che contiene le informazioni sulla posizione e così via.

142
00:11:50,325 --> 00:11:54,510
Subito dopo, ho intenzione di creare un altro div all'interno del

143
00:11:54,510 --> 00:11:59,820
quale ospiteremo la forma reattiva lì.

144
00:11:59,820 --> 00:12:17,720
Permettetemi di applicare alcune cose di layout flessibile

145
00:12:17,720 --> 00:12:19,100
qui al mio div.

146
00:12:19,100 --> 00:12:22,110
Ora, questa dimensione del modulo come puoi vedere dovrebbe essere

147
00:12:22,110 --> 00:12:25,905
una classe CSS che creerò un po 'più tardi.

148
00:12:25,905 --> 00:12:31,540
All' interno di questo div, ho intenzione di ospitare il mio modulo.

149
00:12:31,540 --> 00:12:36,680
Quindi, una volta inserito questo div nel mio file modello,

150
00:12:36,680 --> 00:12:40,180
ora fammi iniziare con un'intestazione per questo.

151
00:12:40,180 --> 00:12:47,675
Quindi, diremo: «Inviaci il tuo feedback».

152
00:12:47,675 --> 00:12:54,250
Quindi, stai cercando il feedback dai visitatori del tuo sito.

153
00:12:54,950 --> 00:12:58,050
Inizieremo a costruire il modulo.

154
00:12:58,050 --> 00:13:03,200
Quindi, lasciami iniziare con il tag modulo

155
00:13:03,200 --> 00:13:08,275
qui e poi costruiremo il modulo all'interno di questo tag modulo qui.

156
00:13:08,275 --> 00:13:12,180
Quindi, per il modulo, la prima cosa che farò è applicare

157
00:13:12,180 --> 00:13:16,535
il no validate perché la convalida verrà curata da angolare,

158
00:13:16,535 --> 00:13:21,380
e quindi applicare anche un gruppo di moduli qui.

159
00:13:21,380 --> 00:13:38,060
Quindi, nota che questo gruppo di moduli è quello che mi legherà nel modello di modulo reattivo

160
00:13:38,060 --> 00:13:40,555
che ho creato nel mio codice qui.

161
00:13:40,555 --> 00:13:42,380
Quindi, facendo questo,

162
00:13:42,380 --> 00:13:47,255
stiamo legando in questa forma reattiva nel modello al modello di

163
00:13:47,255 --> 00:13:53,680
modulo corrispondente nel nostro file dattiloscritto lì.

164
00:13:53,680 --> 00:13:59,100
Quindi, il modo in cui lo facciamo è dichiarare il gruppo di moduli e il modulo di feedback.

165
00:13:59,100 --> 00:14:00,910
Ti mostrerò come legare

166
00:14:00,910 --> 00:14:04,840
gli elementi rimanenti

167
00:14:04,840 --> 00:14:09,315
del modulo alle proprietà corrispondenti nel modello di modulo in breve tempo.

168
00:14:09,315 --> 00:14:11,325
Quindi, dopo aver fatto questo,

169
00:14:11,325 --> 00:14:20,480
mettiamo nei nostri elementi di forma in posizione all'interno di questo modello di modulo.

170
00:14:20,480 --> 00:14:24,490
Quindi, dichiarerò una P qui e poi dentro

171
00:14:24,490 --> 00:14:28,860
userò il campo mat-form qui,

172
00:14:28,860 --> 00:14:35,475
a cui applicherò una classe CSS chiamata Half-Width,

173
00:14:35,475 --> 00:14:39,600
e chiuderlo.

174
00:14:39,600 --> 00:14:45,195
Quindi, questo metterebbe il mio primo controllo modulo qui.

175
00:14:45,195 --> 00:14:55,930
Quindi, qui, inserirò l'input e poi applicherò il matInput dal materiale angolare qui.

176
00:14:56,930 --> 00:15:03,530
Per legarlo nella proprietà all'interno del mio modello di modulo,

177
00:15:03,530 --> 00:15:08,630
avrei bisogno di fare FormControlName

178
00:15:09,980 --> 00:15:14,650
e il primo è il nome.

179
00:15:14,650 --> 00:15:20,370
Quindi, in questo modo, questo input è ora legato alla proprietà del nome

180
00:15:20,370 --> 00:15:26,015
che ho definito all'interno del mio modello di modulo che ho definito nel codice.

181
00:15:26,015 --> 00:15:29,680
Il nome, e quindi definirò

182
00:15:29,680 --> 00:15:37,900
il segnaposto come nome.

183
00:15:37,900 --> 00:15:39,970
Quindi, come ci si aspetterebbe,

184
00:15:39,970 --> 00:15:43,685
questo campo di input verrà utilizzato per digitare

185
00:15:43,685 --> 00:15:51,215
il primo nome dall'utente, digitare il testo.

186
00:15:51,215 --> 00:15:56,935
È interessante notare che non abbiamo

187
00:15:56,935 --> 00:16:02,950
più il modello ng qui o nessuna delle variabili del modello e così via nella mia forma. Le

188
00:16:02,950 --> 00:16:05,945
forme reattive funzionano in modo diverso.

189
00:16:05,945 --> 00:16:08,480
Pertanto, come si vede nei moduli reattivi,

190
00:16:08,480 --> 00:16:11,975
si esegue il mapping del gruppo di moduli e quindi si tenta i nomi dei controlli modulo.

191
00:16:11,975 --> 00:16:16,095
Se si creano controlli modulo con la classe di controllo modulo,

192
00:16:16,095 --> 00:16:20,440
è necessario dichiararlo come controllo modulo tra parentesi quadre e quindi

193
00:16:20,440 --> 00:16:24,910
abbinarlo al controllo modulo corrispondente creato nel tipo scettico.

194
00:16:24,910 --> 00:16:28,940
Ma ora dal momento che stiamo usando il generatore di moduli,

195
00:16:28,940 --> 00:16:33,280
ho solo bisogno di legare nel gruppo di moduli come

196
00:16:33,280 --> 00:16:38,605
questo nel mio modulo al modello di modulo corrispondente,

197
00:16:38,605 --> 00:16:39,890
e quindi il resto di essi,

198
00:16:39,890 --> 00:16:42,690
dichiaro come nome del controllo del modulo e quindi li abbino alle

199
00:16:42,690 --> 00:16:45,085
proprietà corrispondenti nel

200
00:16:45,085 --> 00:16:48,995
modello di controllo del modulo che ho nel mio dattiloscritto il modo del codice.

201
00:16:48,995 --> 00:16:53,950
Quindi, questo creerà il campo del nome lì.

202
00:16:53,950 --> 00:16:56,400
Fammi copiare questo.

203
00:16:56,400 --> 00:17:00,150
Mi serve un cognome qui.

204
00:17:00,150 --> 00:17:07,005
Quindi, ho intenzione di copiare questo e poi dire il nome del controllo del modulo è Cognome,

205
00:17:07,005 --> 00:17:10,510
e il segnaposto è Cognome,

206
00:17:10,510 --> 00:17:12,550
e del tipo, Testo, qui.

207
00:17:12,550 --> 00:17:18,975
Avevo nome,

208
00:17:18,975 --> 00:17:24,970
avevo cognome e se guardate il modello di controllo del modulo,

209
00:17:24,970 --> 00:17:27,400
vedrete che dopo nome e cognome,

210
00:17:27,400 --> 00:17:31,770
ho il numero di telefono come il prossimo,

211
00:17:31,770 --> 00:17:34,325
quindi ho intenzione di incollare questo qui.

212
00:17:34,325 --> 00:17:38,390
Quindi, il nome del controllo modulo qui è Telnum

213
00:17:38,390 --> 00:17:46,920
e il segnaposto è Numero di telefono

214
00:17:46,920 --> 00:17:51,405
e il tipo è Tel.

215
00:17:51,405 --> 00:17:53,385
Mentre ci siamo,

216
00:17:53,385 --> 00:17:59,905
legherò il Richiesto in questi anche se questo non è davvero richiesto.

217
00:17:59,905 --> 00:18:08,275
Ma lasciatemi aggiungere questo.

218
00:18:08,275 --> 00:18:11,920
Ora, numero di telefono, poi ho l'email.

219
00:18:11,920 --> 00:18:20,679
Quindi, il campo successivo è Email,

220
00:18:25,520 --> 00:18:32,100
e il segnaposto è Email,

221
00:18:32,100 --> 00:18:35,510
e il tipo è anche.

222
00:18:35,510 --> 00:18:38,600
Quindi, ora ho il nome,

223
00:18:38,600 --> 00:18:41,610
il cognome, il numero di telefono e l'email.

224
00:18:41,610 --> 00:18:52,820
La prossima cosa che ho intenzione di aggiungere è un interruttore diapositiva.

225
00:18:53,850 --> 00:18:56,600
In precedenza usiamo la casella di controllo.

226
00:18:56,600 --> 00:19:03,240
La slidetoggle è un altro controllo del modulo fornito dal materiale angolare,

227
00:19:03,240 --> 00:19:07,150
che è un po 'diverso rispetto alla casella di controllo e

228
00:19:07,150 --> 00:19:11,480
ho pensato che illustrerò con te usandolo nel modulo qui.

229
00:19:11,480 --> 00:19:18,680
Ora, questo è dove userò una tabella per posizionare questi elementi.

230
00:19:19,890 --> 00:19:22,300
Il motivo è che,

231
00:19:22,300 --> 00:19:25,520
questi elementi sono difficili da posizionare senza utilizzare una tabella.

232
00:19:25,520 --> 00:19:27,605
Quindi, all'interno del tavolo,

233
00:19:27,605 --> 00:19:31,740
sono sicuro che tutti sapete come usare la tabella,

234
00:19:35,280 --> 00:19:39,740
ho provato a posizionarli usando il

235
00:19:39,740 --> 00:19:44,970
layout flessibile standard e non ho avuto molto successo con questo.

236
00:19:44,970 --> 00:19:50,510
Quindi, invece ho fatto ricorso all'utilizzo di una tabella per posizionare questi due elementi nel mio modulo.

237
00:19:50,510 --> 00:19:54,350
Quindi, mat-slide-toggle.

238
00:19:54,350 --> 00:19:57,680
Quindi, la slidetoggle è come la casella di controllo,

239
00:19:57,680 --> 00:20:00,390
puoi attivarla e disattivarla,

240
00:20:00,390 --> 00:20:04,550
e questo è permesso selezionare un valore booleano qui.

241
00:20:04,550 --> 00:20:14,200
Quindi, slidetoggle e FormControlName è d'accordo.

242
00:20:14,200 --> 00:20:16,140
Se ricordi, eravamo d'accordo,

243
00:20:16,140 --> 00:20:22,925
che era una proprietà booleana nel controllo modulo.

244
00:20:22,925 --> 00:20:25,735
Allora, per questo, direi,

245
00:20:25,735 --> 00:20:29,340
possiamo contattarla?

246
00:20:29,340 --> 00:20:35,140
Ora, sarà più chiaro per voi quando vedrete la versione finale di

247
00:20:35,140 --> 00:20:43,060
questo modulo per capire perché stiamo facendo questo.

248
00:20:43,060 --> 00:20:49,895
In questo momento, metteremo tutte le parti nella mia forma reattiva.

249
00:20:49,895 --> 00:20:55,925
La seconda parte utilizzerò una selezione,

250
00:20:55,925 --> 00:21:03,920
che è supportata attraverso il componente mat-select nel materiale angolare.

251
00:21:03,920 --> 00:21:12,460
Quindi, MD seleziona e per questo il

252
00:21:13,520 --> 00:21:21,690
segnaposto, definirò come «Come?»

253
00:21:21,690 --> 00:21:27,580
e formControlName con cui ho intenzione di legare questo è

254
00:21:27,580 --> 00:21:37,650
«contacttype» e chiudere la selezione MD.

255
00:21:37,650 --> 00:21:41,720
Quindi, questo mi permette di creare un elemento select nel mio modulo.

256
00:21:41,720 --> 00:21:44,660
Quindi, l'elemento select è qualcosa che mi dà

257
00:21:44,660 --> 00:21:48,535
un elenco a discesa da cui posso selezionarne uno.

258
00:21:48,535 --> 00:21:50,905
Quindi, per creare l'elenco

259
00:21:50,905 --> 00:22:00,510
a discesa, userò l'opzione tappetino disponibile come componente in materiale angolare.

260
00:22:00,510 --> 00:22:05,035
Quindi, l'opzione mat-è inclusa all'interno del mat-select.

261
00:22:05,035 --> 00:22:06,810
Quindi, per l'opzione,

262
00:22:06,810 --> 00:22:09,570
ho intenzione di farlo* ngFor,

263
00:22:09,570 --> 00:22:17,070
e sono sicuro che ricordi la direttiva ngFor di prima,

264
00:22:17,070 --> 00:22:24,750
* ngFor «Let ctype of ContactType.»

265
00:22:24,750 --> 00:22:28,360
Ora, vedi perché ho dichiarato

266
00:22:28,360 --> 00:22:44,740
prima la variabile del tipo di contatto nel mio codice e poi direi, [value] = «ctype».

267
00:22:44,740 --> 00:23:00,840
Quindi, sto impostando la mia opzione nella mia selezione qui e usando l'interpolazione,

268
00:23:00,840 --> 00:23:03,040
digiterò ctype qui.

269
00:23:03,040 --> 00:23:10,100
Quindi, questo mi darà un menu di opzione a discesa nella mia forma lì.

270
00:23:10,100 --> 00:23:14,665
Quindi, questa è la parte successiva e poi finalmente,

271
00:23:14,665 --> 00:23:21,270
dopo il tavolo, ho intenzione di mettere in un'area di testo qui.

272
00:23:21,270 --> 00:23:31,320
Quindi, direi p e chiudi quella P. Per lo styling della forma reattiva,

273
00:23:31,320 --> 00:23:35,395
l'elemento P mi consente di posizionare correttamente gli elementi.

274
00:23:35,395 --> 00:23:37,580
Quindi, è per questo che lo sto usando.

275
00:23:37,580 --> 00:23:42,380
Quindi, come ricorderai,

276
00:23:42,540 --> 00:23:48,740
mat-form-field mi permette di

277
00:23:48,740 --> 00:23:56,239
includere un contenitore di input qui e poi dentro lì definirò un'area di testo, a

278
00:23:56,239 --> 00:24:00,310
cui applico

279
00:24:00,310 --> 00:24:08,650
la direttiva MatInput a questo.

280
00:24:08,650 --> 00:24:15,460
Quindi, il FormControlName, ho intenzione di dare come «messaggio».

281
00:24:15,460 --> 00:24:23,290
Quindi, questo particolare elemento di forma consente all'utente di digitare

282
00:24:23,290 --> 00:24:31,305
il messaggio di feedback per il mio ristorante.

283
00:24:31,305 --> 00:24:37,100
Quindi, segnaposto «Il tuo feedback»,

284
00:24:37,100 --> 00:24:42,610
e quindi darò all'area di testo una dimensione di

285
00:24:42,610 --> 00:24:51,245
12 righe qui e quindi chiuderò l'area di testo.

286
00:24:51,245 --> 00:24:58,005
Quindi, qui abbiamo un'area di testo con le 12 righe.

287
00:24:58,005 --> 00:25:03,350
Quindi, questo completa la maggior parte del modulo.

288
00:25:03,350 --> 00:25:07,910
Mi dispiace, questo dovrebbe essere fuori dal tavolo.

289
00:25:08,070 --> 00:25:11,830
Abbiamo bisogno di un pulsante per inviare il modulo.

290
00:25:11,830 --> 00:25:20,755
Quindi, proprio lì, includerò un pulsante del tipo = «submit» e

291
00:25:20,755 --> 00:25:24,155
questo pulsante submit applicherò

292
00:25:24,155 --> 00:25:32,270
il tappetino pulsante e applicherò anche la classe = «background-primary».

293
00:25:33,600 --> 00:25:42,770
Mi hai visto applicare questo al pulsante nell'esercizio precedente anche,

294
00:25:42,770 --> 00:25:45,740
simile tipo di pulsante.

295
00:25:45,740 --> 00:25:48,510
Quindi, ora il mio modulo è quasi pronto.

296
00:25:48,510 --> 00:25:54,455
È possibile aggiungere alcune classi CSS al componente contatto.

297
00:25:54,455 --> 00:25:58,725
Le tre classi che ho usato sono a larghezza intera,

298
00:25:58,725 --> 00:26:06,420
questo viene usato per impostare la dimensione degli elementi lì.

299
00:26:06,420 --> 00:26:10,980
Quindi, a tutta larghezza 95 percento, mezza larghezza.

300
00:26:11,200 --> 00:26:17,565
Quindi, questo mi consente di ridimensionare correttamente gli elementi, il

301
00:26:17,565 --> 00:26:23,930
45% a mezza larghezza e quindi la dimensione del modulo.

302
00:26:26,400 --> 00:26:32,740
Quindi, uso queste classi CSS nella mia forma.

303
00:26:32,740 --> 00:26:38,230
Quindi con questo, salviamo le modifiche

304
00:26:38,460 --> 00:26:44,150
e diamo una rapida occhiata al modulo nella nostra applicazione.

305
00:26:44,150 --> 00:26:45,915
Andando al browser,

306
00:26:45,915 --> 00:26:48,725
nella vista dei contatti,

307
00:26:48,725 --> 00:26:54,210
mentre scorri verso il basso, ora vedi il modulo in posizione nella vista dei contatti qui.

308
00:26:54,210 --> 00:26:57,660
Quindi, vedi l'inviaci il tuo feedback,

309
00:26:57,660 --> 00:27:01,985
il nome, il cognome, il numero di telefono,

310
00:27:01,985 --> 00:27:06,695
l'e-mail e l'interruttore diapositiva qui, in

311
00:27:06,695 --> 00:27:12,395
modo da vedere l'interruttore diapositiva in posizione lì e poi questa è questa selezione.

312
00:27:12,395 --> 00:27:15,650
La selezione mi permette di selezionare uno di questi tre.

313
00:27:15,650 --> 00:27:20,415
Il valore predefinito è none e quindi l'area di testo qui,

314
00:27:20,415 --> 00:27:25,675
mi consente di digitare i miei commenti di feedback qui e poi il pulsante di invio.

315
00:27:25,675 --> 00:27:28,940
Quindi, questo completa il modulo reattivo nella

316
00:27:28,940 --> 00:27:32,690
mia domanda, ma quando fai clic sul pulsante Invia,

317
00:27:32,690 --> 00:27:35,000
non sarai in grado di inviare questo modulo.

318
00:27:35,000 --> 00:27:39,480
Quindi, abbiamo bisogno di aggiungere il ngSubmit al nostro modulo nel modello

319
00:27:39,480 --> 00:27:44,485
e quindi aggiungere un metodo nel nostro file di script di tipo.

320
00:27:44,485 --> 00:27:47,185
Andando al nostro codice,

321
00:27:47,185 --> 00:27:49,315
al modulo qui,

322
00:27:49,315 --> 00:27:53,830
insieme al modulo novalidate FormGroup,

323
00:27:53,830 --> 00:28:01,670
ho intenzione di aggiungere in un ngSubmit al modulo.

324
00:28:02,730 --> 00:28:10,025
Chiamerò il metodo come metodo onSubmit.

325
00:28:10,025 --> 00:28:14,155
Quindi, con questo, il mio modulo è ora pronto a inviare informazioni.

326
00:28:14,155 --> 00:28:17,195
Ho bisogno di entrare nei componenti del contatto,

327
00:28:17,195 --> 00:28:25,380
digitare il file di script e quindi creare il metodo onSubmit qui.

328
00:28:25,380 --> 00:28:28,420
Quindi, nel metodo onSubmit,

329
00:28:31,450 --> 00:28:37,030
si dà il caso che il modello di modulo sia esattamente lo stesso dei modelli di dati,

330
00:28:37,030 --> 00:28:45,790
quindi posso semplicemente prendere il valore del modello di modulo.

331
00:28:45,790 --> 00:28:49,840
Quindi, quando hai un modello di modulo come questo modulo di feedback,

332
00:28:49,840 --> 00:28:54,410
il modulo di feedback fornisce una proprietà chiamata valore,

333
00:28:54,410 --> 00:29:00,020
che mi consente di recuperare il valore corrente di tutti questi dal mio modulo di feedback.

334
00:29:00,020 --> 00:29:03,810
Quindi questo formerà un oggetto JavaScript,

335
00:29:03,810 --> 00:29:06,740
che posso quindi mappare nell'oggetto JavaScript di feedback.

336
00:29:06,740 --> 00:29:10,170
Accade così che, entrambi hanno esattamente la stessa struttura,

337
00:29:10,170 --> 00:29:11,690
il modello di dati e il modello di modulo.

338
00:29:11,690 --> 00:29:14,140
Quindi, ecco perché sono in grado di caricare rapidamente il valore

339
00:29:14,140 --> 00:29:18,120
direttamente nel modello di dati quando l'utente invia il modulo.

340
00:29:18,120 --> 00:29:21,120
Se il modello di dati è leggermente diverso dal modello di modulo, è

341
00:29:21,120 --> 00:29:24,460
necessario mappare in modo esplicito le singole proprietà e

342
00:29:24,460 --> 00:29:28,890
che può essere fatto all'interno di questo metodo lì.

343
00:29:29,610 --> 00:29:36,455
Solo per mostrarti che il modulo è inviato correttamente,

344
00:29:36,455 --> 00:29:44,760
registrerò il valore sulla console, la console JavaScript.

345
00:29:44,760 --> 00:29:50,200
Allora direi, questo.feedbackform.reset.

346
00:29:51,320 --> 00:30:00,405
Il metodo di ripristino consente di ripristinare lo stato normale del modulo,

347
00:30:00,405 --> 00:30:03,000
rimuovendo tutte le voci eseguite nel modulo.

348
00:30:03,000 --> 00:30:05,480
Quindi, una volta

349
00:30:05,480 --> 00:30:09,030
che l'utente invia, normalmente acquisisci i valori e quindi reimposta il modulo in modo

350
00:30:09,030 --> 00:30:14,365
che l'ulteriore input possa essere fatto come modulo separato.

351
00:30:14,365 --> 00:30:17,450
Quindi questo è il metodo di reset che useremo qui.

352
00:30:17,450 --> 00:30:19,265
Quindi, con queste modifiche,

353
00:30:19,265 --> 00:30:23,900
salviamo le modifiche e poi andiamo a vedere la nostra forma in azione.

354
00:30:23,900 --> 00:30:30,080
Un' ultima piccola cosa che voglio aggiungere al mio modello è

355
00:30:30,080 --> 00:30:36,200
mostrarti i valori del modulo all'interno del mio modulo stesso,

356
00:30:36,200 --> 00:30:38,230
anche se in una vera applicazione,

357
00:30:38,230 --> 00:30:42,580
non lo faresti, ma volevo solo illustrarti come

358
00:30:42,580 --> 00:30:47,165
puoi vedere i valori del feedbackForm direttamente qui,

359
00:30:47,165 --> 00:30:49,095
dal Modello FeedbackForm.

360
00:30:49,095 --> 00:30:52,395
Quindi posso farcela qui dentro.

361
00:30:52,395 --> 00:31:02,625
Posso dire feedbackform.value e convogliato attraverso json per mostrare qui.

362
00:31:02,625 --> 00:31:08,435
Allo stesso modo, posso fare qui, feedbackForm.

363
00:31:08,435 --> 00:31:15,840
C' è un'altra proprietà associata a tale modello di modulo denominata status,

364
00:31:15,840 --> 00:31:20,440
che mi mostra lo stato del modulo in questo momento,

365
00:31:20,440 --> 00:31:22,265
indipendentemente dal fatto che sia valido o non valido.

366
00:31:22,265 --> 00:31:26,900
Quindi, ho intenzione di aggiungere questi due nel mio modulo qui, in

367
00:31:26,900 --> 00:31:30,285
modo che questo venga mostrato nel mio modello.

368
00:31:30,285 --> 00:31:34,670
Questo è solo per darti una vista istantanea di ciò che

369
00:31:34,670 --> 00:31:41,620
il modello di modulo contiene nel mio file di script di tipo.

370
00:31:42,460 --> 00:31:47,590
Salviamo le modifiche e andiamo a dare un'occhiata veloce al nostro modulo.

371
00:31:47,590 --> 00:31:50,325
Tornando al nostro browser,

372
00:31:50,325 --> 00:31:55,630
ora puoi vedere che i valori del modulo sono mostrati

373
00:31:55,630 --> 00:32:04,460
qui e il modulo è in buona forma per consentirci di digitare i valori.

374
00:32:04,460 --> 00:32:08,660
Quindi cerchiamo di digitare alcuni valori casuali qui e si può

375
00:32:08,660 --> 00:32:14,090
immediatamente vedere il valore si riflette nel modello FeedbackForm lì,

376
00:32:14,090 --> 00:32:24,020
proprio in alto e e-mail.

377
00:32:26,050 --> 00:32:29,295
Non importa, digita qualcosa.

378
00:32:29,295 --> 00:32:31,680
Quindi, questo interruttore a levetta,

379
00:32:31,680 --> 00:32:34,575
puoi vedere che quando lo accendi e spegni,

380
00:32:34,575 --> 00:32:39,385
il turno d'accordo cambia da false a true.

381
00:32:39,385 --> 00:32:43,030
Quindi lascia che lo lasci a vero e poi la selezione.

382
00:32:43,030 --> 00:32:50,640
Permettetemi di selezionare e-mail e poi si vede che il tipo di contatto qui è cambiato in e-mail.

383
00:32:50,640 --> 00:32:56,060
Quindi, questo è il modo in cui sceglieresti di cambiare il valore.

384
00:32:56,060 --> 00:33:00,575
Quindi, diciamo e-mail e poi qui dentro,

385
00:33:00,575 --> 00:33:01,940
possiamo digitare il messaggio.

386
00:33:01,940 --> 00:33:05,960
Qualche testo casuale qui e si sarebbe

387
00:33:05,960 --> 00:33:10,675
in grado di vedere che il testo casuale si riflette nel messaggio lì.

388
00:33:10,675 --> 00:33:12,690
Inviamo il modulo.

389
00:33:12,690 --> 00:33:16,680
Quindi, quando si fa clic sul Invia si vede immediatamente nella console,

390
00:33:16,680 --> 00:33:20,605
il valore viene stampato qui,

391
00:33:20,605 --> 00:33:21,870
in questo oggetto qui.

392
00:33:21,870 --> 00:33:27,155
Così si può navigare per vedere tutte le proprietà per quell'oggetto,

393
00:33:27,155 --> 00:33:31,050
il modello di modulo di feedback.

394
00:33:31,050 --> 00:33:38,210
Quindi, questa è un'illustrazione di una forma reattiva all'interno della nostra applicazione.

395
00:33:38,210 --> 00:33:41,850
Questo completa questo esercizio.

396
00:33:41,850 --> 00:33:44,800
In questo esercizio, abbiamo visto come possiamo creare

397
00:33:44,800 --> 00:33:47,910
una forma reattiva all'interno della nostra applicazione angolare.

398
00:33:47,910 --> 00:33:52,910
Questo è anche un buon punto in cui puoi fare un commit Git con il messaggio,

399
00:33:52,910 --> 00:33:55,670
moduli reattivi parte uno.