1
00:00:03,890 --> 00:00:09,395
Abbiamo appena imparato a conoscere il supporto angolare per le forme,

2
00:00:09,395 --> 00:00:12,125
e in particolare, la forma guidata dal modello.

3
00:00:12,125 --> 00:00:17,520
In questo esercizio creeremo un modulo basato su modelli e quindi includerlo

4
00:00:17,520 --> 00:00:23,375
nel dialogo dei componenti di accesso creato nell'esercizio precedente.

5
00:00:23,375 --> 00:00:29,580
In questa lezione il modulo basato sul modello che creiamo,

6
00:00:29,580 --> 00:00:34,850
consente all'utente di digitare il proprio nome utente e password nel modulo di login,

7
00:00:34,850 --> 00:00:37,700
e quindi inviare queste informazioni alla nostra applicazione.

8
00:00:37,700 --> 00:00:41,825
Ora, come queste informazioni vengono elaborate dal lato server,

9
00:00:41,825 --> 00:00:44,990
che viene lasciato a un corso successivo.

10
00:00:44,990 --> 00:00:49,310
Ma per il momento, abbiamo un modo per catturare il nome utente e la password

11
00:00:49,310 --> 00:00:54,285
inviati dall'utente attraverso il modulo basato sul modello di accesso,

12
00:00:54,285 --> 00:00:58,210
che progetteremo in questo esercizio.

13
00:00:58,210 --> 00:01:01,115
Procedendo con l'esercizio,

14
00:01:01,115 --> 00:01:05,030
il primo passo per essere in grado di sfruttare l'uso

15
00:01:05,030 --> 00:01:08,890
di moduli basati su modelli è quello di andare al

16
00:01:08,890 --> 00:01:17,140
file module.ts app e quindi importare alcuni moduli di supporto per la nostra applicazione.

17
00:01:17,140 --> 00:01:20,764
Quindi, la prima cosa che sto per importare è

18
00:01:20,764 --> 00:01:33,155
il MatFormFieldModule dal

19
00:01:33,155 --> 00:01:38,085
campo modulo materiale angolare.

20
00:01:38,085 --> 00:01:44,600
Quindi, questo ci permette di raggruppare insieme un gruppo di elementi in un campo modulo lì.

21
00:01:44,600 --> 00:01:52,190
Quindi, ci sarà anche importare il MatInputModule.

22
00:01:52,190 --> 00:01:58,100
Il modulo di input supporta il componente di input che è

23
00:01:58,100 --> 00:02:03,650
un componente materiale angolare stilizzato

24
00:02:03,650 --> 00:02:09,690
che supporta il campo modulo di input da moduli HTML qui.

25
00:02:09,690 --> 00:02:15,520
Quindi, anche, fammi importare un MatCheckBox,

26
00:02:18,680 --> 00:02:29,895
il modulo corrispondente dalla casella di controllo Angular Material.

27
00:02:29,895 --> 00:02:32,690
Quindi, questi tre supportano

28
00:02:32,690 --> 00:02:36,410
tre elementi del modulo che useremo quando creiamo la nostra applicazione.

29
00:02:36,410 --> 00:02:42,420
Il modulo campo modulo ci permette di raggruppare insieme un gruppo di elementi del modulo lì.

30
00:02:42,420 --> 00:02:46,240
Il modulo di input ci permette di creare un campo di input in là.

31
00:02:46,240 --> 00:02:48,460
Il modulo checkbox, come ci si aspetterebbe,

32
00:02:48,460 --> 00:02:50,570
ci permette di creare una casella di controllo.

33
00:02:50,570 --> 00:02:53,670
Inoltre, ho anche bisogno di importare

34
00:02:53,670 --> 00:03:06,190
il FormsModule dalle forme angolari.

35
00:03:06,190 --> 00:03:10,130
Il FormsModule è quello che supporta le forme in Angular.

36
00:03:10,130 --> 00:03:12,445
Questo è quello che supporta i moduli basati su modelli.

37
00:03:12,445 --> 00:03:15,280
Quindi, ora che li abbiamo importati, ovviamente,

38
00:03:15,280 --> 00:03:23,775
il passo successivo è quello di andare nel decoratore ngModule e poi tirarli in posizione qui.

39
00:03:23,775 --> 00:03:30,560
Quindi, entreremo qui e poi inseriremo il FormsModule.

40
00:03:30,660 --> 00:03:38,200
Lasciami inserire il FormFieldModule,

41
00:03:38,200 --> 00:03:45,075
l'InputModule, il CheckBoxModule qui.

42
00:03:45,075 --> 00:03:49,325
Quindi, ora il mio modulo app è pronto

43
00:03:49,325 --> 00:03:55,125
a supportare l'uso di moduli basati su modelli nella nostra applicazione.

44
00:03:55,125 --> 00:03:57,485
Ora che abbiamo completato questo,

45
00:03:57,485 --> 00:03:59,530
andiamo al componente di login.

46
00:03:59,530 --> 00:04:02,320
Gran parte del nostro lavoro è nel componente di login.

47
00:04:02,320 --> 00:04:04,090
Permettetemi prima di progettare il modulo.

48
00:04:04,090 --> 00:04:07,975
Quindi, andando nel file del modello del componente di login,

49
00:04:07,975 --> 00:04:14,345
lasciami aggiungere il modello per il nostro modulo per creare il modulo qui.

50
00:04:14,345 --> 00:04:16,190
Quindi, in alto,

51
00:04:16,190 --> 00:04:25,940
creerò una p

52
00:04:25,940 --> 00:04:30,715
che visualizzerà le informazioni che ho digitato nel modulo.

53
00:04:30,715 --> 00:04:36,750
Nel codice, avremo una variabile JavaScript chiamata utente,

54
00:04:36,750 --> 00:04:41,175
che sarà legato ai campi in questo modulo.

55
00:04:41,175 --> 00:04:42,500
Ora, quando lo creeremo,

56
00:04:42,500 --> 00:04:43,690
allora diventerà più chiaro.

57
00:04:43,690 --> 00:04:45,490
Ora, qui, includendo questo,

58
00:04:45,490 --> 00:04:50,100
ciò che sto abilitando è mostrare i cambiamenti.

59
00:04:50,100 --> 00:04:52,990
Mentre digitiamo le informazioni nel modulo,

60
00:04:52,990 --> 00:04:56,390
le modifiche corrispondenti che avvengono nel codice per

61
00:04:56,390 --> 00:05:00,880
riflettere lo stato del modulo possono essere mostrate proprio lì.

62
00:05:00,880 --> 00:05:04,500
Ora, inoltre, ora ho intenzione di creare il modulo qui.

63
00:05:04,500 --> 00:05:07,210
Quindi, entreremo e poi aggiungiamo l'elemento del modulo qui.

64
00:05:07,210 --> 00:05:09,470
A questo elemento del modulo,

65
00:05:09,470 --> 00:05:11,000
ho intenzione di applicare

66
00:05:11,000 --> 00:05:15,260
l'attributo novalidate qui perché

67
00:05:15,260 --> 00:05:19,625
vogliamo che la convalida del modulo sia curata da Angular e non

68
00:05:19,625 --> 00:05:28,820
dalla convalida del modulo HTML standard

69
00:05:28,820 --> 00:05:30,230
supportata dal browser.

70
00:05:30,230 --> 00:05:38,810
Quindi, stiamo andando a spostare quella responsabilità nella nostra applicazione angolare stessa.

71
00:05:38,810 --> 00:05:44,800
Quindi, ecco perché specifico l'attributo novalidate per il mio telefono.

72
00:05:44,800 --> 00:05:47,310
Quindi, questo crea la mia forma qui.

73
00:05:47,310 --> 00:05:53,720
Qui dentro, ho intenzione di usare il mat-dialog-content.

74
00:05:53,790 --> 00:05:58,360
Ora, il mat-dialog-content, come ci si aspetterebbe,

75
00:05:58,360 --> 00:06:03,740
è un'area che contiene il contenuto della finestra di dialogo stessa.

76
00:06:03,740 --> 00:06:06,970
Quindi, è per questo che abbiamo messo quel mat-dialog-content qui.

77
00:06:06,970 --> 00:06:14,265
Poi, qui dentro, creerò il mio modulo qui.

78
00:06:14,265 --> 00:06:16,675
Quindi, ho messo una p lì.

79
00:06:16,675 --> 00:06:23,915
All' interno di quella p, userò un campo mat-form qui.

80
00:06:23,915 --> 00:06:28,805
Quindi, il campo mat-form-mi consente di raggruppare insieme un insieme

81
00:06:28,805 --> 00:06:33,845
di elementi correlati al modulo che uso insieme.

82
00:06:33,845 --> 00:06:39,765
Quindi, qui dentro, inserirò l'input qui.

83
00:06:39,765 --> 00:06:44,505
Quindi, il campo modulo di input da moduli di file HTML.

84
00:06:44,505 --> 00:06:50,255
Quindi, a questo, applicherò l'attributo matInput

85
00:06:50,255 --> 00:06:57,360
che ci consentirà di applicare lo stile di progettazione del materiale per questo input.

86
00:06:57,360 --> 00:07:04,635
Quindi, daremo un segnaposto per questo come nome utente,

87
00:07:04,635 --> 00:07:06,569
e come ci si aspetterebbe,

88
00:07:06,569 --> 00:07:12,220
e il tipo sarà tipo di testo qui.

89
00:07:15,140 --> 00:07:19,830
Permettetemi di aggiungere il ngModel.

90
00:07:19,830 --> 00:07:30,000
Quindi, un modulo basato su modelli è supportato attraverso l'attributo ngModel qui.

91
00:07:30,000 --> 00:07:31,520
Quindi, con il ngModel.

92
00:07:31,520 --> 00:07:36,130
Quindi, puoi vedere il modo della casella di posta della banana di dichiararlo.

93
00:07:36,130 --> 00:07:40,270
Quindi, diremo user.username.

94
00:07:40,270 --> 00:07:48,345
Quindi, questo utente sarà un oggetto JavaScript nel mio file TypeScript,

95
00:07:48,345 --> 00:07:52,440
che conterrà una proprietà username lì,

96
00:07:52,440 --> 00:07:58,540
che monitorerà il valore che inserisci in questo campo di input nel mio modulo lì.

97
00:07:58,540 --> 00:08:06,320
Quindi, è per questo che stiamo legando queste informazioni sul campo di input in questo oggetto JavaScript.

98
00:08:06,320 --> 00:08:08,890
Quindi, questo è l'associazione dati bidirezionale che stiamo facendo

99
00:08:08,890 --> 00:08:13,250
tra l'elemento modulo e il codice JavaScript corrispondente.

100
00:08:13,250 --> 00:08:19,640
Quindi, daremo a questo un nome come nome utente qui.

101
00:08:19,640 --> 00:08:24,495
Quindi, questo è il mio primo campo modulo che ho aggiunto qui.

102
00:08:24,495 --> 00:08:29,330
Ora, allo stesso modo, aggiungerò nel secondo campo modulo per la password.

103
00:08:29,330 --> 00:08:36,255
Quindi, per questo, lasciami copiare questo e poi incollarlo qui.

104
00:08:36,255 --> 00:08:41,820
Quindi, il secondo campo sarebbe Input, MatInput,

105
00:08:41,820 --> 00:08:47,760
segnaposto è password,

106
00:08:47,760 --> 00:08:52,360
e quindi il tipo è password.

107
00:08:52,360 --> 00:09:01,385
Quindi, l'elemento di input della password dal supporto del modulo HTML5.

108
00:09:01,385 --> 00:09:11,050
Il ngModel stesso sarà legato alla password dell'utente e il nome sarebbe password.

109
00:09:11,050 --> 00:09:16,335
Quindi, si vede che l'oggetto JavaScript utente ora contiene due proprietà,

110
00:09:16,335 --> 00:09:20,700
nome utente e password, che terrà traccia delle credenziali dell'utente qui.

111
00:09:20,700 --> 00:09:24,995
Così, questi due campi modulo all'interno di questo p qui,

112
00:09:24,995 --> 00:09:27,740
e poi anche aggiungeremo in un

113
00:09:27,740 --> 00:09:35,795
altro chiamato come mat-checkbox.

114
00:09:35,795 --> 00:09:41,050
Hai visto che in precedenza avevamo incluso il modulo checkbox.

115
00:09:41,050 --> 00:09:43,290
Quindi, abbiamo intenzione di aggiungere in questo.

116
00:09:43,290 --> 00:09:48,735
Ora, questa casella di controllo che, quando selezionata, informerà

117
00:09:48,735 --> 00:09:55,990
la mia applicazione Angular che il nome utente e la password devono essere salvati nell'applicazione.

118
00:09:55,990 --> 00:10:01,220
Quindi, lasciami legare questo con il modello NG a

119
00:10:01,220 --> 00:10:09,730
una proprietà corrispondente chiamata ricorda nell'oggetto utente.

120
00:10:09,730 --> 00:10:11,060
Quindi, questo sarà,

121
00:10:11,060 --> 00:10:14,020
questa proprietà sarà vera o falsa a seconda

122
00:10:14,020 --> 00:10:17,315
che la casella di controllo sia spuntata o deselezionata.

123
00:10:17,315 --> 00:10:19,830
Quindi, e' questo il modo in cui rintracciamo.

124
00:10:19,830 --> 00:10:24,795
Quindi, stiamo facendo l'associazione dati bidirezionale tra questa casella di controllo e

125
00:10:24,795 --> 00:10:32,330
questa proprietà chiamata ricordare l'oggetto JavaScript utente nel mio codice lì.

126
00:10:32,330 --> 00:10:36,260
Allora il nome sarebbe ricordare,

127
00:10:36,260 --> 00:10:43,590
e poi daremo a questo un'etichetta come ricordo di me.

128
00:10:43,850 --> 00:10:46,620
Quindi, quando l'utente controlla questo,

129
00:10:46,620 --> 00:10:50,200
le informazioni dell'utente verranno ricordate qui.

130
00:10:50,200 --> 00:10:52,410
Quindi, questa è la casella di controllo mat-che abbiamo aggiunto.

131
00:10:52,410 --> 00:10:54,270
Quindi, abbiamo tre campi qui,

132
00:10:54,270 --> 00:10:56,585
il nome utente, la password,

133
00:10:56,585 --> 00:11:02,880
e poi una casella di controllo qui nel mio modulo qui.

134
00:11:02,880 --> 00:11:06,090
Quindi, questo è un contenuto mat-dialogo qui.

135
00:11:06,090 --> 00:11:08,800
Ora, oltre al contenuto mat-dialogue,

136
00:11:08,800 --> 00:11:14,985
posso anche aggiungere azioni mat-dialogue qui.

137
00:11:14,985 --> 00:11:23,820
Ora, le azioni di dialogo possono contenere i pulsanti che corrispondono a questa finestra di dialogo.

138
00:11:23,820 --> 00:11:28,145
Quindi, questo è ciò che fungerà da pulsanti di azione nel dialogo,

139
00:11:28,145 --> 00:11:32,210
e anche dal momento che sono racchiusi all'interno del modulo,

140
00:11:32,210 --> 00:11:36,485
questi pulsanti fungeranno anche da pulsanti di invio del modulo per me.

141
00:11:36,485 --> 00:11:44,530
Quindi, qui, lasciami fare un distanziatore flex classe span,

142
00:11:46,580 --> 00:11:52,670
e poi lasciami aggiungere un pulsante, un pulsante

143
00:11:55,950 --> 00:12:02,140
mat-button, e poi questo pulsante,

144
00:12:02,140 --> 00:12:07,090
lo trasformerò anche in un pulsante di chiusura della finestra di dialogo del tappetino.

145
00:12:07,090 --> 00:12:12,115
Quindi, questo sarebbe un pulsante di annullamento che includerò nel mio modulo qui,

146
00:12:12,115 --> 00:12:14,925
quindi questo viene cliccato il dialogo verrà respinto,

147
00:12:14,925 --> 00:12:17,960
e essenzialmente il che significa che non stai inviando il modulo lì.

148
00:12:17,960 --> 00:12:20,505
Quindi, questo funge anche da pulsante di annullamento per il modulo,

149
00:12:20,505 --> 00:12:23,595
e quindi anche respingendo il dialogo allo stesso tempo.

150
00:12:23,595 --> 00:12:27,180
Quindi, usando questo attributo a questo pulsante,

151
00:12:27,180 --> 00:12:31,595
stiamo dichiarando questo come il pulsante che respinge l'errore,

152
00:12:31,595 --> 00:12:36,940
allo stesso modo in cui abbiamo questo pulsante nella barra degli strumenti.

153
00:12:36,940 --> 00:12:38,990
Quindi, la finestra di dialogo del tappetino si chiude lì.

154
00:12:38,990 --> 00:12:42,470
Poi altro pulsante che avremo è

155
00:12:42,470 --> 00:12:49,490
per inviare in modo che

156
00:12:49,490 --> 00:12:55,030
questo tipo di pulsante sarebbe il pulsante di invio all'interno di un modulo lì.

157
00:12:55,030 --> 00:12:56,315
Quindi, quando si fa clic su questo,

158
00:12:56,315 --> 00:13:01,495
che attiva l'invio del modulo per questo modulo qui,

159
00:13:01,495 --> 00:13:06,420
e quindi lasciami aggiungere in una classe a questo,

160
00:13:06,420 --> 00:13:13,795
diremo sfondo primario e testo floreale.

161
00:13:13,795 --> 00:13:19,345
Queste classi che ho già aggiunto nel mio file Styles.acss lì.

162
00:13:19,345 --> 00:13:24,800
Quindi, testo floreale bianco,

163
00:13:24,800 --> 00:13:31,620
e questo pulsante sarebbe etichettato come il pulsante di accesso lì.

164
00:13:31,620 --> 00:13:36,090
Quindi, questo sarebbe un pulsante di colore blu che verrà mostrato nello schermo lì.

165
00:13:36,090 --> 00:13:43,275
Quindi, con questo, la mia struttura del modulo viene creata nel modello lì.

166
00:13:43,275 --> 00:13:49,355
Ora, il passo successivo è quello di andare nel codice e quindi gestire l'invio del modulo stesso.

167
00:13:49,355 --> 00:13:54,070
Quindi, ora andando al login component.ts file,

168
00:13:54,070 --> 00:13:57,400
abbiamo bisogno di gestire l'invio del modulo qui.

169
00:13:57,400 --> 00:14:02,070
Ora, il primo passo che ho intenzione di fare è quando questo componente di login viene creato,

170
00:14:02,070 --> 00:14:12,110
creeremo un oggetto utente qui con il nome utente delle proprietà,

171
00:14:12,110 --> 00:14:16,550
che sarebbe una stringa vuota per cominciare,

172
00:14:16,610 --> 00:14:22,570
password che sarà anche una stringa vuota per cominciare,

173
00:14:22,570 --> 00:14:27,050
e poi ricordare quale è falso.

174
00:14:27,050 --> 00:14:29,640
Ora, dichiarando questo qui,

175
00:14:29,640 --> 00:14:33,530
stiamo anche dicendo che ora possiamo legare in

176
00:14:33,530 --> 00:14:40,210
queste tre proprietà ai tre elementi del modulo nel mio modello.

177
00:14:40,210 --> 00:14:43,920
Quindi, questo è quello che abbiamo finito per raggiungere qui.

178
00:14:43,920 --> 00:14:46,440
Per il costruttore,

179
00:14:46,440 --> 00:14:55,640
permettetemi di iniettare qui il ref del dialogo, il

180
00:14:55,880 --> 00:15:05,410
ref del mat-dialog, e questo mat dialog ref prenderà il componente corrispondente.

181
00:15:05,410 --> 00:15:08,755
Quindi, questo è un riferimento a questo componente di login qui.

182
00:15:08,755 --> 00:15:11,990
Quindi, questo ci dice quando questo... quando questo viene presentato,

183
00:15:11,990 --> 00:15:14,060
come gestirlo.

184
00:15:14,060 --> 00:15:21,985
Quindi, qui, lasciami aggiungere una funzione on submit qui,

185
00:15:21,985 --> 00:15:24,155
e all'interno della funzione on submit,

186
00:15:24,155 --> 00:15:27,935
ho intenzione di

187
00:15:27,935 --> 00:15:32,145
accedere semplicemente, registrare le informazioni degli utenti corrispondenti,

188
00:15:32,145 --> 00:15:35,690
quindi l'utente fa clic sul modulo di login,

189
00:15:35,690 --> 00:15:39,430
il modulo di login e invia il modulo di login.

190
00:15:39,430 --> 00:15:44,585
Al momento ho solo intenzione di registrare le informazioni dell'utente sulla console.

191
00:15:44,585 --> 00:15:49,150
Più tardi, progetteremo nel corso lato server.

192
00:15:49,150 --> 00:15:52,310
Gestiremo il processo di login effettivo quando

193
00:15:52,310 --> 00:15:57,280
il nostro server è pronto ed è in grado di gestire il login dell'utente.

194
00:15:57,280 --> 00:16:03,710
Quindi, dopo questo, diremo questo dialogo ref vicino.

195
00:16:03,710 --> 00:16:06,255
Ora, perché includiamo questo qui?

196
00:16:06,255 --> 00:16:08,105
Quindi, quando il modulo viene presentato,

197
00:16:08,105 --> 00:16:13,960
vogliamo anche respingere la componente lì,

198
00:16:13,960 --> 00:16:15,190
la componente di dialogo lì.

199
00:16:15,190 --> 00:16:16,800
Quindi, chiamando questo,

200
00:16:16,800 --> 00:16:19,120
questo dialogo ref close,

201
00:16:19,120 --> 00:16:23,620
chiediamo che la componente dialoghi sia chiusa qui.

202
00:16:23,620 --> 00:16:29,650
Quindi, questo è il motivo per cui ottengo un riferimento al componente di login qui,

203
00:16:29,650 --> 00:16:33,655
che agisce come il mio componente di dialogo qui.

204
00:16:33,655 --> 00:16:37,445
Quindi, saremo in grado di chiudere il componente finestra di dialogo facendo questo.

205
00:16:37,445 --> 00:16:39,350
Pertanto, una volta

206
00:16:39,350 --> 00:16:41,440
che l'utente invia il modulo, verranno registrate le informazioni utente

207
00:16:41,440 --> 00:16:46,415
e quindi chiudere la finestra di dialogo. Questo è tutto.

208
00:16:46,415 --> 00:16:51,640
Salviamo le modifiche e poi andiamo a dare un'occhiata all'applicazione aggiornata.

209
00:16:51,640 --> 00:16:54,590
Vai nella nostra applicazione nel browser,

210
00:16:54,590 --> 00:17:02,900
lasciami aprire la Console JavaScript in modo che tu possa vedere le informazioni che hai effettuato l'accesso.

211
00:17:02,900 --> 00:17:09,890
Permettetemi di aprire la finestra di dialogo di accesso qui con il modulo già in atto,

212
00:17:09,890 --> 00:17:12,425
il nome utente e la password già in atto.

213
00:17:12,425 --> 00:17:15,820
Quindi, lasciami digitare il nome di un utente.

214
00:17:15,820 --> 00:17:19,165
Sono narcisista qui.

215
00:17:19,165 --> 00:17:22,710
Quindi, sto digitando il nome utente e la password qui.

216
00:17:22,710 --> 00:17:26,495
Ora, si noti che mentre digito le informazioni qui,

217
00:17:26,495 --> 00:17:33,570
poiché sto mostrando il valore dell'oggetto JavaScript dell'utente qui,

218
00:17:33,570 --> 00:17:42,775
tutte le modifiche che apporto vengono immediatamente riflesse sullo schermo qui.

219
00:17:42,775 --> 00:17:50,110
Anche la casella di controllo ricorda che viene spuntata e spunta qui.

220
00:17:50,110 --> 00:17:53,360
Quindi, quando invio il modulo qui,

221
00:17:53,360 --> 00:17:56,040
puoi vedere che nella console,

222
00:17:56,040 --> 00:17:59,350
le informazioni dell'utente vengono registrate nella console,

223
00:17:59,350 --> 00:18:00,595
il nome utente, la password

224
00:18:00,595 --> 00:18:03,440
e il valore di ricordo è bloccato alla console.

225
00:18:03,440 --> 00:18:06,170
Quindi, ora puoi vedere che il mio modulo di accesso,

226
00:18:06,170 --> 00:18:09,275
il modulo guidato dal modello funziona correttamente.

227
00:18:09,275 --> 00:18:12,305
Con questo, completiamo questo esercizio,

228
00:18:12,305 --> 00:18:18,965
in cui abbiamo visto come possiamo progettare una forma guidata da template nella nostra applicazione angolare.

229
00:18:18,965 --> 00:18:22,870
Questo è un buon momento per fare un Git Commit con il messaggio,

230
00:18:22,870 --> 00:18:26,000
Template Driven Forms Parte 1.