1
00:00:03,650 --> 00:00:09,630
Abbiamo affrontato le forme reattive in una delle lezioni precedenti,

2
00:00:09,630 --> 00:00:14,420
dove abbiamo fatto due esercizi riguardanti le forme reattive, il

3
00:00:14,420 --> 00:00:15,695
modo in cui le creiamo,

4
00:00:15,695 --> 00:00:20,530
e poi anche fare una convalida di moduli di base su moduli reattivi.

5
00:00:20,530 --> 00:00:24,525
Continueremo con il tema in questa lezione,

6
00:00:24,525 --> 00:00:28,790
perché le forme reattive come suggerisce il nome,

7
00:00:28,790 --> 00:00:33,019
hanno qualcosa a che fare con la programmazione reattiva come ci si potrebbe aspettare.

8
00:00:33,019 --> 00:00:42,429
Ora, i moduli reattivi consentono anche di guardare le modifiche nei valori degli elementi del modulo,

9
00:00:42,429 --> 00:00:48,320
utilizzando un osservabile che Angular rende disponibile chiamato ValueChanges.

10
00:00:48,320 --> 00:00:53,450
In questo esercizio verrà utilizzato il valore osservabile ValueChanges,

11
00:00:53,450 --> 00:00:57,080
al fine di tenere traccia delle modifiche apportate ai valori dei

12
00:00:57,080 --> 00:01:01,650
vari elementi del modulo e quindi attivare immediatamente la convalida del modulo.

13
00:01:01,650 --> 00:01:06,350
In questo esercizio faremo la maggior parte della convalida del modulo nel

14
00:01:06,350 --> 00:01:11,120
codice piuttosto che nel modello stesso,

15
00:01:11,120 --> 00:01:19,189
come abbiamo fatto con la convalida del modulo del reattore nel secondo esercizio delle forme reattive.

16
00:01:19,189 --> 00:01:24,115
Andando a contact.component.tsfile,

17
00:01:24,115 --> 00:01:29,720
stiamo andando ad aggiornare il modulo reattivo che abbiamo creato qui,

18
00:01:29,720 --> 00:01:34,445
aggiungendo alcuni altri validatori per alcuni di questi campi.

19
00:01:34,445 --> 00:01:38,915
Quindi, qui vedete che per il cognome e

20
00:01:38,915 --> 00:01:43,465
il numero di telefono e e-mail abbiamo aggiunto i validatori richiesti.

21
00:01:43,465 --> 00:01:45,290
Per il nome e il cognome,

22
00:01:45,290 --> 00:01:48,500
aggiungerò un paio di altri validatori per

23
00:01:48,500 --> 00:01:52,315
la lunghezza minima e la lunghezza massima.

24
00:01:52,315 --> 00:01:57,185
Ora, se hai più di un validatore nel tuo modulo reattivo,

25
00:01:57,185 --> 00:02:04,470
devi dichiararli usando un array lì dentro.

26
00:02:04,470 --> 00:02:08,385
Quindi, questo deve essere racchiuso all'interno di un array qui.

27
00:02:08,385 --> 00:02:12,790
Quindi, vedi che ho racchiuso il validatore richiesto all'interno di un array.

28
00:02:12,790 --> 00:02:21,300
Ho intenzione di aggiungere un Validator, MinLength Validator.

29
00:02:21,300 --> 00:02:25,250
Quindi, per la lunghezza minima specificherò due come lunghezza minima,

30
00:02:25,250 --> 00:02:28,925
quindi il firstname dovrebbe contenere almeno due caratteri.

31
00:02:28,925 --> 00:02:36,645
Anche la lunghezza massima che

32
00:02:36,645 --> 00:02:48,035
aggiungerò come 25 caratteri.

33
00:02:48,035 --> 00:02:52,740
Quindi, qui vedete che ora per il nome abbiamo tre diverse convalide,

34
00:02:52,740 --> 00:02:55,455
tutte racchiuse in un array qui.

35
00:02:55,455 --> 00:02:58,620
Validatori richiesti, Validatori MinLength

36
00:02:58,620 --> 00:03:02,135
e Validatori MaxLength qui, 25.

37
00:03:02,135 --> 00:03:05,900
Quindi, farò la stessa cosa anche per il mio cognome.

38
00:03:05,900 --> 00:03:11,115
Quindi, lasciami copiare tutto questo raggio dei validatori qui,

39
00:03:11,115 --> 00:03:21,420
e poi sostituisci questo con quel set di validatori.

40
00:03:21,420 --> 00:03:25,330
Inoltre, per il numero di telefono,

41
00:03:25,330 --> 00:03:29,060
come ricorderete nella versione precedente del modulo,

42
00:03:29,060 --> 00:03:35,395
il numero di telefono era disposto ad accettare anche alfabeti,

43
00:03:35,395 --> 00:03:37,015
ma questo non è corretto.

44
00:03:37,015 --> 00:03:40,070
I numeri di telefono sono di solito numeri.

45
00:03:40,070 --> 00:03:43,955
Quindi, questo è dove useremo un altro validatore

46
00:03:43,955 --> 00:03:53,005
chiamato validatori modello.

47
00:03:53,005 --> 00:03:57,890
Così, il modello Validator ci permette di specificare un modello per

48
00:03:57,890 --> 00:04:02,719
i valori inseriti in quel particolare elemento del modulo,

49
00:04:02,719 --> 00:04:09,465
e quindi controllare per assicurarsi che il valore segue il modello specificato.

50
00:04:09,465 --> 00:04:12,470
Quindi, qui il modello che useremo è che il valore

51
00:04:12,470 --> 00:04:17,180
dovrebbe contenere solo numeri tra zero e nove.

52
00:04:17,180 --> 00:04:19,015
Per aggiungere il modello,

53
00:04:19,015 --> 00:04:23,860
abbiamo bisogno di farlo nel file modello come vedremo in breve tempo.

54
00:04:23,860 --> 00:04:26,415
Allo stesso modo, per l'e-mail,

55
00:04:26,415 --> 00:04:31,635
avrò anche un altro validatore chiamato come validatore e-mail.

56
00:04:31,635 --> 00:04:35,035
Quindi, aggiungeremo l'e-mail dei validatori.

57
00:04:35,035 --> 00:04:40,010
Ciò significa anche che abbiamo bisogno di aggiungere un attributo

58
00:04:40,010 --> 00:04:44,990
chiamato e-mail all'input nel nostro file modello.

59
00:04:44,990 --> 00:04:53,145
Ora, con queste modifiche, la mia convalida del modulo è diventata più robusta in questo esercizio.

60
00:04:53,145 --> 00:04:59,534
Ora, quando il modulo sperimenta cambiamenti in uno qualsiasi dei suoi elementi del modulo,

61
00:04:59,534 --> 00:05:09,530
allora il framework angolare fornisce un osservabile chiamato come ValueChanges osservabile.

62
00:05:09,530 --> 00:05:16,150
Quindi, userò il ValueChanges osservabile sul mio modulo di feedback.

63
00:05:16,550 --> 00:05:19,770
Quindi, il ValueChanges osservabile.

64
00:05:19,770 --> 00:05:26,640
Quindi, il ValueChanges osservabile può ora essere sottoscritto all'interno di questo particolare metodo.

65
00:05:26,640 --> 00:05:28,415
Quindi, quando creiamo il modulo stesso,

66
00:05:28,415 --> 00:05:31,520
ci iscriveremo al ValueChanges osservabile qui.

67
00:05:31,520 --> 00:05:33,470
Ora, quando il ValueChanges,

68
00:05:33,470 --> 00:05:38,274
quindi sottoscrivendo a questo osservabile,

69
00:05:38,274 --> 00:05:44,630
all'interno della sottoscrizione specificherò cosa dovrebbe essere fatto quando il ValueChanges.

70
00:05:44,630 --> 00:05:49,160
Quindi, quando ValueChanges otterrei alcuni dati qui,

71
00:05:49,160 --> 00:05:52,055
dalla farm per indicare

72
00:05:52,055 --> 00:05:59,050
quale particolare elemento del modulo ha sperimentato il cambiamento nel valore.

73
00:05:59,050 --> 00:06:00,665
Quindi, quando ciò accade,

74
00:06:00,665 --> 00:06:07,865
attiverò un metodo locale che implementerò chiamato

75
00:06:07,865 --> 00:06:13,165
onValueChanged e quindi fornirò quei dati come parametro a questo metodo.

76
00:06:13,165 --> 00:06:16,455
Ora, all'interno di questo metodo onValueChanged,

77
00:06:16,455 --> 00:06:20,445
inizierò la convalida del modulo

78
00:06:20,445 --> 00:06:27,155
e quindi definirò in modo appropriato i messaggi di errore del modulo in base

79
00:06:27,155 --> 00:06:35,380
a ciò che questo oggetto dati che ottengo qui mi specificherà.

80
00:06:35,380 --> 00:06:39,125
Inoltre, quando creo il modulo per la prima volta,

81
00:06:39,125 --> 00:06:47,114
chiamerò il metodo onValueChanged senza alcun parametro

82
00:06:47,114 --> 00:06:50,250
e questo verrebbe utilizzato per

83
00:06:50,250 --> 00:06:58,615
reimpostare i messaggi di convalida del modulo.

84
00:06:58,615 --> 00:07:02,195
Ora, come posso creare i messaggi di convalida del modulo?

85
00:07:02,195 --> 00:07:09,230
Per fare ciò, definirò i miei messaggi di convalida del modulo completamente nel codice qui.

86
00:07:09,230 --> 00:07:12,620
Quindi attraverso il codice,

87
00:07:12,620 --> 00:07:15,920
adatterò i messaggi di convalida del modulo

88
00:07:15,920 --> 00:07:23,785
e che verrebbero quindi utilizzati per visualizzare i messaggi di errore nel mio modello di modulo stesso.

89
00:07:23,785 --> 00:07:33,830
Quindi, per farlo, quello che ho intenzione di fare è aggiungere alcuni oggetti JavaScript qui.

90
00:07:33,830 --> 00:07:42,485
Uno degli oggetti JavaScript che ho intenzione di aggiungere è chiamato come errori di modulo.

91
00:07:42,485 --> 00:07:46,790
Quindi, questo è un semplice oggetto JavaScript che

92
00:07:46,790 --> 00:07:52,315
conterrà tutti gli errori per il particolare modulo qui.

93
00:07:52,315 --> 00:07:54,799
Quindi all'interno degli errori del modulo,

94
00:07:54,799 --> 00:08:02,609
userò quattro campi diversi

95
00:08:02,609 --> 00:08:11,275
, nome, cognome.

96
00:08:11,275 --> 00:08:13,305
Quindi, come ricorderete,

97
00:08:13,305 --> 00:08:21,889
questi corrispondono ai quattro elementi del modulo su cui sto facendo la convalida del modulo, il

98
00:08:21,889 --> 00:08:30,470
numero di telefono e l'e-mail.

99
00:08:30,470 --> 00:08:35,020
Ora, perché definisco questo oggetto JavaScript qui?

100
00:08:35,020 --> 00:08:41,075
Ora, questo oggetto JavaScript come vedi contiene quattro elementi qui.

101
00:08:41,075 --> 00:08:44,270
Ora, ogni volta che eseguo la convalida del modulo,

102
00:08:44,270 --> 00:08:47,090
ricorda che

103
00:08:47,090 --> 00:08:50,915
ho già specificato che creerò un nuovo metodo chiamato onValueChange.

104
00:08:50,915 --> 00:08:55,145
All' interno di OnValueChange, il modo in cui viene scritto il codice è che,

105
00:08:55,145 --> 00:08:58,300
se viene rilevato

106
00:08:58,300 --> 00:09:02,315
un errore, una stringa contenente il messaggio corrispondente a

107
00:09:02,315 --> 00:09:08,135
tale errore verrà aggiunta a questo oggetto JavaScript.

108
00:09:08,135 --> 00:09:10,535
Quindi, in questo modo all'interno del mio codice,

109
00:09:10,535 --> 00:09:13,204
posso fare la convalida del modulo.

110
00:09:13,204 --> 00:09:15,315
Ora, oltre a questo,

111
00:09:15,315 --> 00:09:21,150
definirò alcuni messaggi di convalida.

112
00:09:21,840 --> 00:09:27,100
Ora, questo particolare modello di fare le cose,

113
00:09:27,100 --> 00:09:36,345
ho imparato leggendo la documentazione sulla convalida del modulo nel sito web angular.io.

114
00:09:36,345 --> 00:09:43,020
Quindi, hanno un'intera documentazione su come fare la convalida del modulo e un link a cui è

115
00:09:43,020 --> 00:09:45,315
disponibile nelle risorse aggiuntive di

116
00:09:45,315 --> 00:09:50,510
questo capitolo e anche nei capitoli precedenti su moduli angolari.

117
00:09:50,510 --> 00:09:55,950
Quindi, lì in quel particolare documento

118
00:09:55,950 --> 00:10:02,655
prescrivono questo come un modo per fare la convalida dei moduli e ho trovato che è molto intuitivo.

119
00:10:02,655 --> 00:10:08,640
Quindi, ho anche adottato lo stesso modello per fare la convalida del modulo nel codice.

120
00:10:08,640 --> 00:10:10,500
Quindi, insieme a qui,

121
00:10:10,500 --> 00:10:20,515
definirò i messaggi di convalida per tutti i possibili campi qui.

122
00:10:20,515 --> 00:10:22,475
Quindi, per il campo del nome,

123
00:10:22,475 --> 00:10:30,050
definirò alcuni messaggi di convalida qui, quindi direi,

124
00:10:30,050 --> 00:10:32,965
«richiesto» e poi dire

125
00:10:32,965 --> 00:10:39,940
«il nome è richiesto»

126
00:10:39,940 --> 00:10:48,790
in questo modo, aggiungerò alcuni messaggi di convalida

127
00:10:48,790 --> 00:10:52,030
qui e dirò,

128
00:10:52,030 --> 00:10:57,070
«Il nome deve essere

129
00:10:57,070 --> 00:11:05,770
lungo almeno 2 caratteri» e poi lo farò anche aggiungere,

130
00:11:05,770 --> 00:11:15,700
«lunghezza massima» e il messaggio corrispondente sarebbe,

131
00:11:15,700 --> 00:11:23,630
«Il nome non può essere più di 25".

132
00:11:24,780 --> 00:11:29,685
Se hai un nome che corre in 25 caratteri,

133
00:11:29,685 --> 00:11:35,115
devi davvero maledire i tuoi genitori per questo, credetemi,

134
00:11:35,115 --> 00:11:39,670
uno dei miei secondi nomi è un lungo secondo nome,

135
00:11:39,670 --> 00:11:46,035
e che non uso esplicitamente nei miei documenti.

136
00:11:46,035 --> 00:11:48,870
Ma, posso capire il dolore,

137
00:11:48,870 --> 00:11:55,450
se hai un nome lungo maggiore di 25 caratteri.

138
00:11:56,700 --> 00:12:02,900
Le persone di alcuni stati nel sud dell'India hanno nomi lunghi,

139
00:12:03,690 --> 00:12:06,870
incluso il mio stato, ehi,

140
00:12:06,870 --> 00:12:09,270
divertiamoci un po' mentre ci siamo.

141
00:12:09,270 --> 00:12:17,180
Ok, includero' anche la stessa cosa per il cognome.

142
00:12:17,180 --> 00:12:23,380
Quindi, ho intenzione di modificare questo

143
00:12:23,380 --> 00:12:33,430
e specificare la stessa cosa del cognome.

144
00:12:33,430 --> 00:12:39,020
Quindi, come vedi all'interno del codice puoi specificare una serie di messaggi di errore.

145
00:12:39,020 --> 00:12:42,855
Ora, se aggiungi una nuova convalida ai tuoi moduli,

146
00:12:42,855 --> 00:12:44,505
tutto ciò che devi fare è,

147
00:12:44,505 --> 00:12:47,230
vieni qui e aggiungi il nuovo messaggio di errore in

148
00:12:47,230 --> 00:12:54,635
questo oggetto JavaScript qui e il tuo codice funzionerà bene, come tale.

149
00:12:54,635 --> 00:13:03,015
Quindi, questo è il vantaggio di utilizzare questo modello per progettare la convalida nel codice.

150
00:13:03,015 --> 00:13:09,835
Continuando, mi permetta di definire la convalida per il numero di telefono e

151
00:13:09,835 --> 00:13:17,700
le due convalida per i numeri di telefono che accadrebbe è la «richiesta».

152
00:13:17,700 --> 00:13:22,390
Quindi, ho solo intenzione di copiare il «richiesto» da lì,

153
00:13:22,390 --> 00:13:24,170
e incollarlo qui,

154
00:13:24,170 --> 00:13:27,215
e direi,

155
00:13:27,215 --> 00:13:36,910
«Il numero di telefono è richiesto», e il prossimo messaggio di errore sarebbe per «pattern».

156
00:13:36,910 --> 00:13:42,585
Quindi, il messaggio di errore dice,

157
00:13:42,585 --> 00:13:50,770
«Il numero di telefono deve contenere solo numeri».

158
00:13:50,910 --> 00:13:58,070
Quindi, questo è l'altro messaggio, allo stesso modo per e-mail.

159
00:13:58,070 --> 00:14:03,109
Quindi, come puoi vedere i valori che sto usando qui

160
00:14:03,109 --> 00:14:08,430
corrispondono ai nomi dei validatori che ho usato,

161
00:14:08,430 --> 00:14:12,305
«mid length», «max length required», «pattern».

162
00:14:12,305 --> 00:14:14,280
Quindi, allo stesso modo per l'e-mail,

163
00:14:14,280 --> 00:14:18,720
vedresti «obbligatorio» e «Email'.

164
00:14:18,720 --> 00:14:28,615
Quindi, ho solo intenzione di copiare il «richiesto» qui e dire, «L'e-mail è richiesta».

165
00:14:28,615 --> 00:14:36,020
L' altro modello come ricordi è per e-mail e direi,

166
00:14:36,020 --> 00:14:40,865
«Email non in formato valido».

167
00:14:40,865 --> 00:14:43,200
Quindi, in genere se la tua email non contiene

168
00:14:43,200 --> 00:14:48,190
un simbolo @ e caratteri su entrambi i lati del segno @,

169
00:14:48,190 --> 00:14:50,230
allora questo non è un messaggio di posta elettronica valido.

170
00:14:50,230 --> 00:14:58,265
Questo validatore e-mail è già integrato nel modulo moduli reattivi angolari.

171
00:14:58,265 --> 00:15:02,240
Quindi, faremo uso dell'e-mail Validator qui.

172
00:15:02,240 --> 00:15:07,450
Quindi, qui abbiamo tutti i messaggi di convalida definiti nel codice.

173
00:15:07,450 --> 00:15:14,340
Quindi, questo rende molto facile estenderli per campi aggiuntivi se necessario e anche

174
00:15:14,340 --> 00:15:17,770
aggiungere più messaggi di convalida per convalide aggiuntive

175
00:15:17,770 --> 00:15:21,865
che potresti introdurre per ciascuno di questi campi modulo.

176
00:15:21,865 --> 00:15:25,785
Inoltre, questo errore di modulo oggetto mi aiuta a tenere traccia di

177
00:15:25,785 --> 00:15:31,415
tutti gli errori associati a ciascuno degli elementi nel mio telefono.

178
00:15:31,415 --> 00:15:34,390
Quindi, attualmente controllo solo questi quattro elementi,

179
00:15:34,390 --> 00:15:37,165
quindi è per questo che ho solo per questo.

180
00:15:37,165 --> 00:15:42,365
Correzione minore, la «media lunghezza» dovrebbe essere min,

181
00:15:42,365 --> 00:15:45,910
piccola 'l' e lunghezza massima anche con una piccola 'l',

182
00:15:45,910 --> 00:15:48,140
analogamente anche per il cognome.

183
00:15:48,140 --> 00:15:53,750
Ora, scriviamo il codice per il metodo sui valori modificati.

184
00:15:53,750 --> 00:15:55,765
Quindi, ho intenzione di scrivere il metodo

185
00:15:55,765 --> 00:16:02,860
qui, «ValueChanged» e quindi questo

186
00:16:02,860 --> 00:16:08,275
prenderà un parametro, possibilmente.

187
00:16:08,275 --> 00:16:10,900
Ecco perché ho messo un punto interrogativo dei dati,

188
00:16:10,900 --> 00:16:16,760
il che significa che il parametro è facoltativo.

189
00:16:17,760 --> 00:16:27,610
Quindi, la prima cosa che controllerò è, «questo modulo di feedback», il

190
00:16:27,610 --> 00:16:32,290
che significa che se il modulo di feedback non è stato creato allora,

191
00:16:32,290 --> 00:16:34,960
e se questo metodo viene chiamato,

192
00:16:34,960 --> 00:16:42,130
allora dovresti semplicemente «tornare» senza nulla.

193
00:16:42,130 --> 00:16:50,680
Quindi, definirò una

194
00:16:50,680 --> 00:16:56,780
costante chiamata «questo

195
00:16:56,780 --> 00:17:03,025
modulo di feedback» è solo per rendere facile definire il resto del codice,

196
00:17:03,025 --> 00:17:05,380
quindi direi, «per il

197
00:17:06,240 --> 00:17:16,330
campo const in questo.form errori.form».

198
00:17:16,330 --> 00:17:21,510
Quindi, si noti che questo campo avrà questo.form errori,

199
00:17:21,510 --> 00:17:24,710
l'oggetto errori modulo che abbiamo definito in precedenza.

200
00:17:24,710 --> 00:17:28,150
Quindi, sentire significa che controllerò tutti e quattro.

201
00:17:28,150 --> 00:17:29,890
Quindi, ogni volta che rilevo delle modifiche,

202
00:17:29,890 --> 00:17:31,260
il nome, il cognome, il

203
00:17:31,260 --> 00:17:32,820
numero di telefono e un'e-mail.

204
00:17:32,820 --> 00:17:41,080
Quindi, questo è il motivo per cui questi quattro porteranno esattamente gli stessi nomi che abbiamo usato nel modulo qui,

205
00:17:41,080 --> 00:17:50,330
e in modo che il codice scritto qui sarà semplice da lavorare con.

206
00:17:52,770 --> 00:17:56,650
Quindi, ho intenzione di controllare ora i campi del modulo.

207
00:17:56,650 --> 00:18:07,090
Quindi, vorrei prima

208
00:18:07,090 --> 00:18:16,000
assicurarmi che nel caso in cui in precedenza ho allegato messaggi a questi campi

209
00:18:16,000 --> 00:18:17,810
modulo, modulo errori oggetto lì,

210
00:18:17,810 --> 00:18:19,665
quindi ho intenzione di cancellarli tutti.

211
00:18:19,665 --> 00:18:23,830
Quindi, ecco perché se lo chiami senza parametri,

212
00:18:23,830 --> 00:18:26,600
tutti i campi di errore del modulo verranno cancellati,

213
00:18:26,600 --> 00:18:36,335
e quindi farei «control FormGet».

214
00:18:36,335 --> 00:18:44,330
Quindi, si noti che sto usando quel campo stesso per fare un FormGet quindi,

215
00:18:44,330 --> 00:18:48,530
sto ottenendo l'accesso a quel particolare campo modulo.

216
00:18:48,530 --> 00:18:52,090
Quindi, si noti che prima stavamo facendo «feedbackform.this.feedbackform.get"firstname.»

217
00:18:58,930 --> 00:19:04,870
e così via. Quindi, ho semplificato cosa in questa particolare costante che abbiamo

218
00:19:04,870 --> 00:19:13,000
definito qui e poi dirò, «Se il controllo».

219
00:19:13,000 --> 00:19:22,645
Quindi, il che significa che se il controllo non è nullo e «control.dirty».

220
00:19:22,645 --> 00:19:28,150
Quindi, se quel particolare campo è già sporco

221
00:19:28,150 --> 00:19:33,635
e non «controllo valido».

222
00:19:33,635 --> 00:19:36,280
Quindi, significa che per ciascuno dei campi,

223
00:19:36,280 --> 00:19:39,780
sto letteralmente controllando per vedere se è valido,

224
00:19:39,780 --> 00:19:40,840
se è sporco,

225
00:19:40,840 --> 00:19:44,260
e quindi se il controllo è già lì.

226
00:19:44,260 --> 00:19:48,430
Quindi, ho intenzione di controllare per vedere che tipo di errori sono stati aggiunti a

227
00:19:48,430 --> 00:19:53,185
questo particolare controllo dal modulo lì.

228
00:19:53,185 --> 00:19:55,045
Quindi, qui dirò,

229
00:19:55,045 --> 00:19:59,500
«messaggi const uguali

230
00:19:59,500 --> 00:20:06,560
a questo.validation messages field».

231
00:20:07,260 --> 00:20:10,635
Si noti come sto raccogliendo

232
00:20:10,635 --> 00:20:15,785
tutti i messaggi di convalida corrispondenti a quel particolare campo nome

233
00:20:15,785 --> 00:20:19,370
, cognome o telnum o e-mail,

234
00:20:19,370 --> 00:20:23,585
quindi controllerò e vedrò se ho bisogno di aggiungerlo nel campo.

235
00:20:23,585 --> 00:20:25,050
Allora, come faccio a farlo?

236
00:20:25,050 --> 00:20:35,360
Quindi, lo facciamo per la chiave const in control.errors.

237
00:20:35,360 --> 00:20:45,510
Quindi, si noti che questo controllo è il campo di feedback form.get e.error,

238
00:20:45,510 --> 00:20:48,980
quindi sto controllando per vedere se ci sono errori lì.

239
00:20:48,980 --> 00:20:51,370
Quindi, in tal caso,

240
00:20:51,370 --> 00:20:58,485
aggiungerò questo campo degli errori del modulo.

241
00:20:58,485 --> 00:21:06,285
Quindi, per quel particolare elemento nell'oggetto JavaScript che ho definito qui,

242
00:21:06,285 --> 00:21:13,180
aggiungerei la chiave dei messaggi

243
00:21:13,180 --> 00:21:21,135
più e lo spazio qui.

244
00:21:21,135 --> 00:21:24,590
Quindi, ora qualunque sia il sondaggio di errore modulo

245
00:21:24,590 --> 00:21:27,555
o il messaggio corrispondente verrà preso e allegato,

246
00:21:27,555 --> 00:21:32,350
e quindi così il mio oggetto JavaScript errori modulo conterrà ora

247
00:21:32,350 --> 00:21:34,970
tutti i messaggi di errore collegati insieme quando

248
00:21:34,970 --> 00:21:39,780
questo particolare sui valori ha cambiato il metodo ratti.

249
00:21:39,780 --> 00:21:44,430
Ora, questo particolare pezzo di codice che ho preso in prestito

250
00:21:44,430 --> 00:21:50,560
dalla documentazione di convalida del modulo su angular.iu.

251
00:21:50,560 --> 00:21:55,240
Ho scoperto che questo è un modo molto intuitivo di fare il controllo degli errori dei moduli.

252
00:21:55,240 --> 00:22:02,195
Quindi, ho pensato perché non farne uso all'interno del nostro esercizio di forme reattive angolari.

253
00:22:02,195 --> 00:22:05,515
Quindi, aggiungendo questo codice lì dentro.

254
00:22:05,515 --> 00:22:15,180
Ora, la mia applicazione è pronta per eseguire la convalida del modulo per il mio modulo reattivo.

255
00:22:15,180 --> 00:22:22,500
Quindi, ora il passo successivo è andare al contatto component.html,

256
00:22:22,500 --> 00:22:25,805
il file modello e quindi aggiornare il file modello.

257
00:22:25,805 --> 00:22:28,505
Quindi, andando a quel file modello,

258
00:22:28,505 --> 00:22:31,275
ora andremo al modulo,

259
00:22:31,275 --> 00:22:39,100
e il in questo modulo ora invece di fare tutti questi controlli nel codice,

260
00:22:39,920 --> 00:22:48,165
ora possiamo semplificare molto del codice qui nel file modello qui.

261
00:22:48,165 --> 00:22:50,550
Ora, invece di fare tutti questi controlli,

262
00:22:50,550 --> 00:22:56,065
quello che ci rendiamo conto è che il modulo errori oggetto JavaScript nel

263
00:22:56,065 --> 00:23:00,270
mio file dattiloscritto se ci sono errori, quindi

264
00:23:00,270 --> 00:23:05,610
l'oggetto JavaScript degli errori modulo per quel particolare campo,

265
00:23:05,610 --> 00:23:10,125
avrà tutti i messaggi di errore allegati ad esso.

266
00:23:10,125 --> 00:23:11,460
Se non ci sono errori,

267
00:23:11,460 --> 00:23:14,505
allora quei messaggi di errore non saranno lì.

268
00:23:14,505 --> 00:23:17,860
Quindi, questo è quello che userò per verificare e

269
00:23:17,860 --> 00:23:21,245
vedere se dovrei visualizzare l'errore del modulo o meno.

270
00:23:21,245 --> 00:23:24,685
Quindi, per questo, invece di controllare tutto questo,

271
00:23:24,685 --> 00:23:34,740
l'unica cosa che ho bisogno di controllare qui è formErrors firstname, è tutto.

272
00:23:34,740 --> 00:23:40,450
Quindi, molto facile da controllare per gli errori qui.

273
00:23:41,110 --> 00:23:47,095
Allo stesso modo, quindi questo intero codice ora viene semplificato qui,

274
00:23:47,095 --> 00:23:52,100
e allo stesso modo quando controlli il messaggio qui,

275
00:23:52,100 --> 00:23:56,615
cosa faremo, cambierò tutta questa cosa da

276
00:23:56,615 --> 00:24:05,165
richiesto toccato a formErrors.firstName.

277
00:24:05,165 --> 00:24:08,955
Questo è tutto. Se ciò esiste,

278
00:24:08,955 --> 00:24:14,760
allora tutti i messaggi di errore corrispondenti a questo saranno già lì,

279
00:24:14,760 --> 00:24:19,620
quindi ho solo bisogno di fare l'interpolazione e

280
00:24:19,620 --> 00:24:26,555
quindi visualizzare formErrors.firstName qui,

281
00:24:26,555 --> 00:24:28,385
semplice come quello.

282
00:24:28,385 --> 00:24:30,240
Ora, si vede facendo

283
00:24:30,240 --> 00:24:36,355
tutto il modulo di convalida degli errori e il codice e facendo tutti i controlli e così via nel codice,

284
00:24:36,355 --> 00:24:40,200
si è già costruito i messaggi di errore che abbiamo bisogno di visualizzare.

285
00:24:40,200 --> 00:24:42,740
Tutto quello che facciamo è prendere quel messaggio di errore e poi

286
00:24:42,740 --> 00:24:45,745
metterlo nel modello qui, tutto qui.

287
00:24:45,745 --> 00:24:50,105
Il codice modello diventa più semplificato in questo caso particolare,

288
00:24:50,105 --> 00:24:57,225
e anche facendo la convalida del modulo utilizzando il codice dattiloscritto,

289
00:24:57,225 --> 00:25:02,045
abbiamo semplificato il modello qui allo stesso tempo possiamo fare una

290
00:25:02,045 --> 00:25:09,165
convalida del modulo più complicata nel nostro codice dattiloscritto.

291
00:25:09,165 --> 00:25:16,500
Ho intenzione di andare avanti e fare lo stesso tipo di modifiche ai campi rimanenti qui,

292
00:25:16,500 --> 00:25:20,460
quindi per il campo cognome,

293
00:25:20,460 --> 00:25:30,850
ho intenzione di sostituire nuovamente questa intera cosa con formErrors.lastName.

294
00:25:34,100 --> 00:25:41,050
Ora, di nuovo fare la stessa cosa per il numero di telefono.

295
00:25:41,330 --> 00:25:46,910
Ora, di nuovo come vedete la struttura del modello diventa molto,

296
00:25:46,910 --> 00:25:50,230
molto uniforme in questo caso.

297
00:25:50,230 --> 00:25:55,020
Quindi, questo è anche un altro modo per semplificare

298
00:25:55,020 --> 00:26:01,660
la struttura del tuo modello continuando al campo e-mail qui.

299
00:26:01,660 --> 00:26:06,640
Ho intenzione di fare la stessa modifica anche al campo e-mail.

300
00:26:06,640 --> 00:26:10,430
Quindi, direi formErrors.email

301
00:26:12,470 --> 00:26:19,140
e sostituirlo con formatters.email.

302
00:26:19,140 --> 00:26:20,995
Quindi, come puoi vedere,

303
00:26:20,995 --> 00:26:28,455
il tuo codice modello si è semplificato in modo significativo rispetto a prima.

304
00:26:28,455 --> 00:26:32,545
Con questo tutta la convalida degli errori che richiedo

305
00:26:32,545 --> 00:26:36,600
è stata aggiunta nel mio modello e il mio modello è ora aggiornato,

306
00:26:36,600 --> 00:26:38,900
quindi salviamo le modifiche.

307
00:26:39,560 --> 00:26:46,800
Altre due cose che devo aggiungere sono l'attributo

308
00:26:46,800 --> 00:26:53,255
chiamato email a questo particolare campo chiamato email.

309
00:26:53,255 --> 00:26:56,625
Quindi, ricorda che abbiamo aggiunto l'email Validator qui.

310
00:26:56,625 --> 00:26:58,300
Quindi, insieme al richiesto,

311
00:26:58,300 --> 00:27:03,655
aggiungerò e-mail anche al campo di input qui.

312
00:27:03,655 --> 00:27:05,655
Allo stesso modo, per il telnum,

313
00:27:05,655 --> 00:27:08,115
usiamo il modello lì.

314
00:27:08,115 --> 00:27:14,670
Quindi, ho intenzione di aggiungere il modello quindi questo è il campo di input per il telnum.

315
00:27:14,670 --> 00:27:24,485
Quindi, all'interno del campo di input ho intenzione di aggiungere il modello è uguale a e

316
00:27:24,485 --> 00:27:29,250
il modello che ho intenzione di aggiungere è

317
00:27:29,250 --> 00:27:35,350
tra parentesi quadre da zero a nove,

318
00:27:35,350 --> 00:27:37,875
e poi mettere una stella lì.

319
00:27:37,875 --> 00:27:45,430
Quindi, il che significa che questo è qualcosa da zero a nove ripetuto più volte.

320
00:27:45,430 --> 00:27:51,045
Quindi, il numero di telefono può contenere qualsiasi numero compreso tra zero e nove.

321
00:27:51,045 --> 00:27:53,370
Qualsiasi numero di quei numeri.

322
00:27:53,370 --> 00:27:57,085
Puoi anche inserire un minlength e maxlength sul campo telnum

323
00:27:57,085 --> 00:28:01,100
se per il tuo particolare paese il numero di telefono ha un formato fisso,

324
00:28:01,100 --> 00:28:02,440
puoi farlo anche tu.

325
00:28:02,440 --> 00:28:05,410
Quindi, questo può essere fatto facilmente.

326
00:28:05,410 --> 00:28:08,130
Ma, in questo esercizio,

327
00:28:08,130 --> 00:28:13,470
non ho aggiunto la restrizione minlength e maxlength per il telnum qui.

328
00:28:13,470 --> 00:28:15,720
Ora, che abbiamo fatto tutti gli aggiornamenti,

329
00:28:15,720 --> 00:28:23,150
salviamo le modifiche e poi andiamo a dare un'occhiata al modulo nel browser.

330
00:28:23,150 --> 00:28:25,640
Andando al browser ora,

331
00:28:25,640 --> 00:28:28,920
scorriamo verso il basso fino al modulo qui.

332
00:28:28,920 --> 00:28:34,775
Cerchiamo di digitare il nome e come si vede quando si digita un solo carattere,

333
00:28:34,775 --> 00:28:38,290
quindi il messaggio di errore viene immediatamente visualizzato,

334
00:28:38,290 --> 00:28:42,490
ma nel momento in cui si digita caratteri aggiuntivi che il messaggio di errore scompare.

335
00:28:42,490 --> 00:28:44,980
Allo stesso modo, per il cognome.

336
00:28:44,980 --> 00:28:50,794
Per il numero di telefono, se si tenta di digitare qualcosa di diverso dai numeri,

337
00:28:50,794 --> 00:28:53,830
vengono visualizzati i messaggi di errore.

338
00:28:54,240 --> 00:28:56,575
Quindi, è possibile digitare, in

339
00:28:56,575 --> 00:29:04,790
modo simile per e-mail, in modo da vedere che il formato e-mail non valido verrà visualizzato.

340
00:29:04,790 --> 00:29:10,380
Se non si dispone dell'e-mail, viene visualizzato anche il messaggio di errore.

341
00:29:10,380 --> 00:29:14,415
Ma, nel momento in cui digiti qualcosa del genere,

342
00:29:14,415 --> 00:29:18,745
allora questo è considerato un formato email valido, quindi sarà accettato.

343
00:29:18,745 --> 00:29:23,895
Quindi, questo è l'insieme di messaggi di errore e la convalida del modulo

344
00:29:23,895 --> 00:29:30,080
eseguita completamente nel codice come fatto in questo particolare esercizio.

345
00:29:30,080 --> 00:29:33,625
Quindi, con questo, completiamo questo esercizio.

346
00:29:33,625 --> 00:29:40,200
In questo esercizio, abbiamo visto l'uso del cambiamento di valore è osservabile,

347
00:29:40,200 --> 00:29:46,915
e abbiamo anche visto come possiamo fare la convalida del modulo nel nostro codice dattiloscritto.

348
00:29:46,915 --> 00:29:49,040
Questo completa questo esercizio.

349
00:29:49,040 --> 00:29:52,030
Questo è un buon momento per fare un commit git con

350
00:29:52,030 --> 00:29:56,310
i moduli reattivi del messaggio parte tre.