1
00:00:03,650 --> 00:00:09,630
Tínhamos lidado com formas reativas em uma das lições anteriores,

2
00:00:09,630 --> 00:00:14,420
onde fizemos dois exercícios lidando com formas reativas,

3
00:00:14,420 --> 00:00:15,695
como as criamos,

4
00:00:15,695 --> 00:00:20,530
e depois também fazemos alguma validação básica de formulários em formas reativas.

5
00:00:20,530 --> 00:00:24,525
Continuaremos com o tema nesta lição,

6
00:00:24,525 --> 00:00:28,790
porque formas reativas como o nome indica,

7
00:00:28,790 --> 00:00:33,019
tem algo a ver com programação reativa como você poderia esperar.

8
00:00:33,019 --> 00:00:42,429
Agora, formulários reativos também permitem que você observe alterações nos valores dos elementos de formulário,

9
00:00:42,429 --> 00:00:48,320
usando um observável que Angular disponibiliza chamado valueChanges.

10
00:00:48,320 --> 00:00:53,450
Vamos fazer uso do ValueChanges observável neste exercício,

11
00:00:53,450 --> 00:00:57,080
para rastrear alterações nos valores de

12
00:00:57,080 --> 00:01:01,650
seus vários elementos de formulário e, em seguida, acionar imediatamente a validação de formulário.

13
00:01:01,650 --> 00:01:06,350
Neste exercício vamos fazer a maior parte da validação do formulário no código

14
00:01:06,350 --> 00:01:11,120
em vez do modelo em si,

15
00:01:11,120 --> 00:01:19,189
como fizemos com a validação da forma do reator no segundo exercício de formas reativas.

16
00:01:19,189 --> 00:01:24,115
Indo para contact.component.tsfile,

17
00:01:24,115 --> 00:01:29,720
vamos atualizar o formulário reativo que criamos aqui,

18
00:01:29,720 --> 00:01:34,445
adicionando mais alguns Validadores para alguns desses campos.

19
00:01:34,445 --> 00:01:38,915
Então, aqui você vê que para o primeiro sobrenome e

20
00:01:38,915 --> 00:01:43,465
o número de telefone e e-mail adicionamos os validadores necessários.

21
00:01:43,465 --> 00:01:45,290
Para o primeiro e o sobrenome,

22
00:01:45,290 --> 00:01:48,500
Vou adicionar mais alguns Validadores para

23
00:01:48,500 --> 00:01:52,315
o comprimento mínimo e o comprimento máximo.

24
00:01:52,315 --> 00:01:57,185
Agora, se você tem mais de um Validador em sua forma reativa,

25
00:01:57,185 --> 00:02:04,470
você tem que declará-los usando uma matriz lá.

26
00:02:04,470 --> 00:02:08,385
Então, isso tem que ser fechado dentro de uma matriz aqui.

27
00:02:08,385 --> 00:02:12,790
Então, você vê que eu tenho fechado o validador necessário dentro de uma matriz.

28
00:02:12,790 --> 00:02:21,300
Vou adicionar em um Validadores, minLength Validator.

29
00:02:21,300 --> 00:02:25,250
Então, para o comprimento mínimo eu vou especificar dois como o comprimento mínimo,

30
00:02:25,250 --> 00:02:28,925
para que o nome deve conter pelo menos dois caracteres.

31
00:02:28,925 --> 00:02:36,645
Também o comprimento máximo que vou

32
00:02:36,645 --> 00:02:48,035
adicionar como 25 caracteres.

33
00:02:48,035 --> 00:02:52,740
Então, aqui você vê que agora para o primeiro nome temos três diferentes Validations,

34
00:02:52,740 --> 00:02:55,455
todas incluídas em uma matriz aqui.

35
00:02:55,455 --> 00:02:58,620
Validadores necessários, Validadores minLength,

36
00:02:58,620 --> 00:03:02,135
e Validadores MaxLength aqui, 25.

37
00:03:02,135 --> 00:03:05,900
Então, eu vou fazer a mesma coisa também para o meu sobrenome.

38
00:03:05,900 --> 00:03:11,115
Então, deixe-me copiar todo este raio Validadores aqui,

39
00:03:11,115 --> 00:03:21,420
e, em seguida, substituir este por aquele conjunto de Validadores.

40
00:03:21,420 --> 00:03:25,330
Agora, além disso, para o número de telefone,

41
00:03:25,330 --> 00:03:29,060
como você se lembra na versão anterior do formulário,

42
00:03:29,060 --> 00:03:35,395
o número de telefone estava disposto a aceitar até alfabetos,

43
00:03:35,395 --> 00:03:37,015
mas isso não está correto.

44
00:03:37,015 --> 00:03:40,070
Números de telefone geralmente são números.

45
00:03:40,070 --> 00:03:43,955
Então, este é o lugar onde vamos usar outro Validador

46
00:03:43,955 --> 00:03:53,005
chamado Validadores padrão.

47
00:03:53,005 --> 00:03:57,890
Então, o Validador padrão nos permite especificar um padrão para

48
00:03:57,890 --> 00:04:02,719
os valores inseridos nesse elemento de forma particular,

49
00:04:02,719 --> 00:04:09,465
e, em seguida, verifique para se certificar de que o valor segue o padrão especificado.

50
00:04:09,465 --> 00:04:12,470
Então, aqui o padrão que vamos usar é que o valor

51
00:04:12,470 --> 00:04:17,180
deve conter apenas números entre zero e nove.

52
00:04:17,180 --> 00:04:19,015
Para adicionar o padrão,

53
00:04:19,015 --> 00:04:23,860
precisamos fazer isso no arquivo de modelo como veremos em pouco tempo.

54
00:04:23,860 --> 00:04:26,415
Da mesma forma, para o e-mail,

55
00:04:26,415 --> 00:04:31,635
Eu também terei outro Validador chamado como o Validador de e-mail.

56
00:04:31,635 --> 00:04:35,035
Então, vamos adicionar no e-mail Validadores.

57
00:04:35,035 --> 00:04:40,010
Isso também significa que precisamos adicionar um atributo

58
00:04:40,010 --> 00:04:44,990
chamado email à entrada em nosso arquivo de modelo.

59
00:04:44,990 --> 00:04:53,145
Agora, com essas mudanças, minha validação de formulário tornou-se mais robusta neste exercício.

60
00:04:53,145 --> 00:04:59,534
Agora, quando o formulário experimenta mudanças em qualquer um dos seus elementos de formulário,

61
00:04:59,534 --> 00:05:09,530
então o quadro Angular fornece um observável chamado como ValueChanges observável.

62
00:05:09,530 --> 00:05:16,150
Então, eu vou usar o ValueChanges observável no meu formulário de feedback.

63
00:05:16,550 --> 00:05:19,770
Então, o ValueChanges observável.

64
00:05:19,770 --> 00:05:26,640
Então, o ValueChanges observável agora pode ser inscrito dentro deste método específico.

65
00:05:26,640 --> 00:05:28,415
Então, quando criarmos o formulário em si,

66
00:05:28,415 --> 00:05:31,520
vamos assinar o ValueChanges observável aqui.

67
00:05:31,520 --> 00:05:33,470
Agora, quando o ValueChanges,

68
00:05:33,470 --> 00:05:38,274
assim, subscrevendo a este observável,

69
00:05:38,274 --> 00:05:44,630
dentro do subscrito vou especificar o que deve ser feito quando o ValueChanges.

70
00:05:44,630 --> 00:05:49,160
Então, quando o ValueChanges eu obteria alguns dados aqui,

71
00:05:49,160 --> 00:05:52,055
do farm para indicar

72
00:05:52,055 --> 00:05:59,050
qual elemento de forma particular experimentou a mudança no valor.

73
00:05:59,050 --> 00:06:00,665
Então, quando isso acontecer,

74
00:06:00,665 --> 00:06:07,865
Eu vou acionar um método local que vou implementar chamado onValueChanged,

75
00:06:07,865 --> 00:06:13,165
e, em seguida, fornecer esses dados como um parâmetro para este método.

76
00:06:13,165 --> 00:06:16,455
Agora, dentro deste método onValueChanged,

77
00:06:16,455 --> 00:06:20,445
Vou iniciar a validação de formulário,

78
00:06:20,445 --> 00:06:27,155
e, em seguida, definir adequadamente as mensagens de erro de formulário com base no que

79
00:06:27,155 --> 00:06:35,380
este objeto de dados que eu obtenho aqui irá especificar para mim.

80
00:06:35,380 --> 00:06:39,125
Além disso, quando eu criar o formulário,

81
00:06:39,125 --> 00:06:47,114
Vou chamar o método onValueChanged sem qualquer parâmetro,

82
00:06:47,114 --> 00:06:50,250
e isso seria usado para

83
00:06:50,250 --> 00:06:58,615
redefinir mensagens de validação de formulário.

84
00:06:58,615 --> 00:07:02,195
Agora, como faço para criar as mensagens de validação de formulário?

85
00:07:02,195 --> 00:07:09,230
Para fazer isso, vou definir minhas mensagens de validação de formulário completamente em código aqui.

86
00:07:09,230 --> 00:07:12,620
Em seguida, através do código,

87
00:07:12,620 --> 00:07:15,920
Eu vou adaptar as mensagens de validação de formulário,

88
00:07:15,920 --> 00:07:23,785
e que seria então usado para exibir as mensagens de erro no meu modelo de formulário em si.

89
00:07:23,785 --> 00:07:33,830
Então, para fazer isso, o que eu vou fazer é adicionar alguns objetos JavaScript aqui.

90
00:07:33,830 --> 00:07:42,485
Um dos objetos JavaScript que vou adicionar é nomeado como erros de formulário.

91
00:07:42,485 --> 00:07:46,790
Então, este é um objeto JavaScript simples que

92
00:07:46,790 --> 00:07:52,315
irá conter todos os erros para o formulário particular aqui.

93
00:07:52,315 --> 00:07:54,799
Assim, dentro dos erros de formulário,

94
00:07:54,799 --> 00:08:02,609
Vou usar quatro campos diferentes,

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

96
00:08:11,275 --> 00:08:13,305
Então, como você se lembra,

97
00:08:13,305 --> 00:08:21,889
estes correspondem aos quatro elementos de formulário em que estou fazendo a validação do formulário,

98
00:08:21,889 --> 00:08:30,470
número de telefone e e-mail.

99
00:08:30,470 --> 00:08:35,020
Agora, por que eu defino este objeto JavaScript aqui?

100
00:08:35,020 --> 00:08:41,075
Agora, este objeto JavaScript como você vê contém quatro elementos aqui.

101
00:08:41,075 --> 00:08:44,270
Agora, sempre que faço a validação do formulário,

102
00:08:44,270 --> 00:08:47,090
recorda que já especifiquei que

103
00:08:47,090 --> 00:08:50,915
vou criar um novo método chamado onValueChange.

104
00:08:50,915 --> 00:08:55,145
Dentro do OnValueChange, a forma como o código é escrito é que,

105
00:08:55,145 --> 00:08:58,300
se algum erro for detectado,

106
00:08:58,300 --> 00:09:02,315
uma string contendo a mensagem correspondente a

107
00:09:02,315 --> 00:09:08,135
que o erro será adicionado a este objeto JavaScript.

108
00:09:08,135 --> 00:09:10,535
Assim, desta forma dentro do meu código,

109
00:09:10,535 --> 00:09:13,204
Eu posso fazer a validação do formulário.

110
00:09:13,204 --> 00:09:15,315
Agora, além disso,

111
00:09:15,315 --> 00:09:21,150
Vou agora definir algumas mensagens de validação.

112
00:09:21,840 --> 00:09:27,100
Agora, esse padrão particular de fazer coisas,

113
00:09:27,100 --> 00:09:36,345
Eu aprendi lendo a documentação sobre validação de formulário no site angular.io.

114
00:09:36,345 --> 00:09:43,020
Então, eles têm toda uma documentação sobre como fazer validação de formulário e um link para o qual é

115
00:09:43,020 --> 00:09:45,315
disponível nos recursos adicionais de

116
00:09:45,315 --> 00:09:50,510
este capítulo e também os capítulos anteriores sobre formas angulares.

117
00:09:50,510 --> 00:09:55,950
Então, lá naquele documento em particular eles

118
00:09:55,950 --> 00:10:02,655
prescrevem isso como uma forma de fazer validação de formulário e eu achei que era muito intuitivo.

119
00:10:02,655 --> 00:10:08,640
Então, eu também adotei o mesmo padrão para fazer validação de formulário em código.

120
00:10:08,640 --> 00:10:10,500
Então, junto com aqui,

121
00:10:10,500 --> 00:10:20,515
Eu vou definir as mensagens de validação para todos os campos possíveis aqui.

122
00:10:20,515 --> 00:10:22,475
Então, para o campo de primeiro nome,

123
00:10:22,475 --> 00:10:30,050
Eu vou definir algumas mensagens de validação aqui, então eu diria,

124
00:10:30,050 --> 00:10:32,965
“obrigatório” e depois dizer,

125
00:10:32,965 --> 00:10:39,940
“primeiro nome é obrigatório” como este,

126
00:10:39,940 --> 00:10:48,790
Vou adicionar em algumas mensagens de validação

127
00:10:48,790 --> 00:10:52,030
aqui e dizer,

128
00:10:52,030 --> 00:10:57,070
“Primeiro nome deve ser

129
00:10:57,070 --> 00:11:05,770
pelo menos 2 caracteres” e então eu também irá adicionar,

130
00:11:05,770 --> 00:11:15,700
“comprimento máximo” e a mensagem correspondente seria,

131
00:11:15,700 --> 00:11:23,630
“Nome não pode ser superior a 25".

132
00:11:24,780 --> 00:11:29,685
Se você tem um nome que tem 25 caracteres,

133
00:11:29,685 --> 00:11:35,115
você deve estar realmente amaldiçoando seus pais por isso, acredite em mim,

134
00:11:35,115 --> 00:11:39,670
um dos meus nomes do meio é um longo nome do meio,

135
00:11:39,670 --> 00:11:46,035
e que eu não uso explicitamente em meus documentos.

136
00:11:46,035 --> 00:11:48,870
Mas, eu posso entender a dor,

137
00:11:48,870 --> 00:11:55,450
se você tem um nome longo maior que 25 caracteres.

138
00:11:56,700 --> 00:12:02,900
Pessoas de alguns estados na parte sul da Índia têm nomes longos,

139
00:12:03,690 --> 00:12:06,870
meu estado incluído, hey,

140
00:12:06,870 --> 00:12:09,270
vamos nos divertir enquanto estamos nisso.

141
00:12:09,270 --> 00:12:17,180
Ok, eu também vou incluir a mesma coisa para o sobrenome.

142
00:12:17,180 --> 00:12:23,380
Então, eu vou editar este

143
00:12:23,380 --> 00:12:33,430
e especificar a mesma coisa que o sobrenome.

144
00:12:33,430 --> 00:12:39,020
Então, como você vê dentro do código, você pode especificar um conjunto de mensagens de erro.

145
00:12:39,020 --> 00:12:42,855
Agora, se você adicionar nova validação aos seus formulários,

146
00:12:42,855 --> 00:12:44,505
tudo o que você precisa fazer é,

147
00:12:44,505 --> 00:12:47,230
venha aqui e adicione a nova mensagem de erro em

148
00:12:47,230 --> 00:12:54,635
este objeto JavaScript aqui e seu código funcionará bem, como tal.

149
00:12:54,635 --> 00:13:03,015
Então, essa é a vantagem de usar esse padrão para projetar sua validação em código.

150
00:13:03,015 --> 00:13:09,835
Continuando, deixe-me definir a validação para o número de telefone e

151
00:13:09,835 --> 00:13:17,700
a validação dois para números de telefone que aconteceria é o “obrigatório”.

152
00:13:17,700 --> 00:13:22,390
Então, eu só vou copiar o “obrigatório” de lá,

153
00:13:22,390 --> 00:13:24,170
e colá-lo aqui,

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

155
00:13:27,215 --> 00:13:36,910
“O número de telefone é necessário”, e a próxima mensagem de erro seria para “padrão”.

156
00:13:36,910 --> 00:13:42,585
Então, a mensagem de erro diz,

157
00:13:42,585 --> 00:13:50,770
“O número de telefone deve conter apenas números.”

158
00:13:50,910 --> 00:13:58,070
Então, essa é a outra mensagem, da mesma forma para e-mail.

159
00:13:58,070 --> 00:14:03,109
Então, como você pode ver os valores que eu estou usando aqui

160
00:14:03,109 --> 00:14:08,430
são correspondentes aos nomes do Validador que eu usei,

161
00:14:08,430 --> 00:14:12,305
“comprimento médio”, “comprimento máximo necessário”, “padrão”.

162
00:14:12,305 --> 00:14:14,280
Assim, da mesma forma para o e-mail,

163
00:14:14,280 --> 00:14:18,720
você veria “obrigatório” e “Email'.

164
00:14:18,720 --> 00:14:28,615
Então, eu vou apenas copiar o “obrigatório” aqui e dizer, “O e-mail é obrigatório”.

165
00:14:28,615 --> 00:14:36,020
O outro padrão que você lembra é para e-mail e eu diria,

166
00:14:36,020 --> 00:14:40,865
“E-mail não em formato válido”.

167
00:14:40,865 --> 00:14:43,200
Então, normalmente se o seu e-mail não contém

168
00:14:43,200 --> 00:14:48,190
um sinal @ e caracteres em ambos os lados do sinal @,

169
00:14:48,190 --> 00:14:50,230
então isso não é um e-mail válido.

170
00:14:50,230 --> 00:14:58,265
Este Validador de e-mail já está integrado no módulo de formulários reativos angulares.

171
00:14:58,265 --> 00:15:02,240
Então, vamos fazer uso do e-mail Validator aqui.

172
00:15:02,240 --> 00:15:07,450
Então, aqui temos todas as mensagens de validação definidas no código.

173
00:15:07,450 --> 00:15:14,340
Então, isso torna muito fácil estender para campos adicionais se você precisar e também

174
00:15:14,340 --> 00:15:17,770
adicionando mais mensagens de validação para validações adicionais

175
00:15:17,770 --> 00:15:21,865
que você pode introduzir para cada um desses campos de formulário.

176
00:15:21,865 --> 00:15:25,785
Além disso, esses erros de formulário de objeto me ajuda a rastrear

177
00:15:25,785 --> 00:15:31,415
todos os erros associados a cada um dos elementos no meu telefone.

178
00:15:31,415 --> 00:15:34,390
Então, atualmente eu só verificar esses quatro elementos,

179
00:15:34,390 --> 00:15:37,165
então é por isso que eu só tenho para isso.

180
00:15:37,165 --> 00:15:42,365
Correção menor, o “comprimento médio” deve ser min,

181
00:15:42,365 --> 00:15:45,910
pequeno 'l' e comprimento máximo também com um pequeno 'l',

182
00:15:45,910 --> 00:15:48,140
semelhante para o sobrenome também.

183
00:15:48,140 --> 00:15:53,750
Agora, vamos escrever o código para o método em valores alterados.

184
00:15:53,750 --> 00:15:55,765
Então, eu vou escrever o método

185
00:15:55,765 --> 00:16:02,860
aqui, "valueChanged” e, em seguida, este

186
00:16:02,860 --> 00:16:08,275
vai tomar em um parâmetro, possivelmente.

187
00:16:08,275 --> 00:16:10,900
É por isso que coloquei um ponto de interrogação de dados,

188
00:16:10,900 --> 00:16:16,760
o que significa que o parâmetro é opcional.

189
00:16:17,760 --> 00:16:27,610
Então, a primeira coisa que vou verificar é, “este formulário de feedback”,

190
00:16:27,610 --> 00:16:32,290
o que significa que se o formulário de feedback não foi criado então,

191
00:16:32,290 --> 00:16:34,960
e se esse método é chamado,

192
00:16:34,960 --> 00:16:42,130
então você deve simplesmente “retornar” sem nada.

193
00:16:42,130 --> 00:16:50,680
Então, vou definir uma constante

194
00:16:50,680 --> 00:16:56,780
chamada “esta forma de feedback

195
00:16:56,780 --> 00:17:03,025
” é apenas para facilitar a definição do resto do código,

196
00:17:03,025 --> 00:17:05,380
então eu diria, “para

197
00:17:06,240 --> 00:17:16,330
campo const em erros this.form”.

198
00:17:16,330 --> 00:17:21,510
Então, observe que este campo levará this.form erros,

199
00:17:21,510 --> 00:17:24,710
o objeto de erros de formulário que definimos anteriormente.

200
00:17:24,710 --> 00:17:28,150
Então, sentir significa que vou verificar todos os quatro.

201
00:17:28,150 --> 00:17:29,890
Então, sempre que eu detectar qualquer alteração,

202
00:17:29,890 --> 00:17:31,260
o primeiro nome, o sobrenome,

203
00:17:31,260 --> 00:17:32,820
número tel e um e-mail.

204
00:17:32,820 --> 00:17:41,080
Então, é por isso que esses quatro carregarão exatamente os mesmos nomes que usamos no formulário aqui,

205
00:17:41,080 --> 00:17:50,330
e para que o código escrito aqui seja simples de trabalhar.

206
00:17:52,770 --> 00:17:56,650
Então, eu vou agora verificar os campos de formulário.

207
00:17:56,650 --> 00:18:07,090
Então, eu primeiro

208
00:18:07,090 --> 00:18:16,000
certificar-se de que no caso de eu ter anexado anteriormente quaisquer mensagens a estes campos de formulário,

209
00:18:16,000 --> 00:18:17,810
erros de formulário objeto lá,

210
00:18:17,810 --> 00:18:19,665
então eu vou limpar todos eles.

211
00:18:19,665 --> 00:18:23,830
Então, é por isso que se você chamar isso sem parâmetro,

212
00:18:23,830 --> 00:18:26,600
todos os campos de erro de formulário serão apagados,

213
00:18:26,600 --> 00:18:36,335
e então eu faria, “controle FormGet”.

214
00:18:36,335 --> 00:18:44,330
Então, observe que eu estou usando esse campo em si para fazer um FormGet assim,

215
00:18:44,330 --> 00:18:48,530
Estou recebendo acesso a esse campo de formulário específico.

216
00:18:48,530 --> 00:18:52,090
Então, observe que anteriormente estávamos fazendo “feedbackform.this.feedbackform.get"firstname”.

217
00:18:58,930 --> 00:19:04,870
e assim por diante. Então, eu simplifiquei o que nesta constante particular que nós

218
00:19:04,870 --> 00:19:13,000
definimos aqui e então eu vou dizer, “Se controle”.

219
00:19:13,000 --> 00:19:22,645
Então, o que significa que se o controle não é nulo e “control.dirty”.

220
00:19:22,645 --> 00:19:28,150
Então, se esse campo específico já estiver sujo

221
00:19:28,150 --> 00:19:33,635
e não “controle válido”.

222
00:19:33,635 --> 00:19:36,280
Então, significa que para cada um dos campos,

223
00:19:36,280 --> 00:19:39,780
Eu estou literalmente verificando para ver se é válido,

224
00:19:39,780 --> 00:19:40,840
se é sujo,

225
00:19:40,840 --> 00:19:44,260
e então se o controle já está lá.

226
00:19:44,260 --> 00:19:48,430
Então, eu vou verificar para ver que tipo de erros foram adicionados a

227
00:19:48,430 --> 00:19:53,185
este controle particular pelo formulário lá.

228
00:19:53,185 --> 00:19:55,045
Então, aqui vou dizer,

229
00:19:55,045 --> 00:19:59,500
“mensagens const iguais

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

231
00:20:07,260 --> 00:20:10,635
Observe como eu estou pegando

232
00:20:10,635 --> 00:20:15,785
todas as mensagens de validação correspondentes a esse campo particular nome,

233
00:20:15,785 --> 00:20:19,370
sobrenome, ou telnum ou e-mail,

234
00:20:19,370 --> 00:20:23,585
e então eu vou verificar e ver se eu preciso adicionar isso no campo.

235
00:20:23,585 --> 00:20:25,050
Então, como faço isso?

236
00:20:25,050 --> 00:20:35,360
Então, fazemos para chave const em control.errors.

237
00:20:35,360 --> 00:20:45,510
Então, observe que este controle é o campo de feedback form.get e.error,

238
00:20:45,510 --> 00:20:48,980
então estou verificando se há algum erro lá.

239
00:20:48,980 --> 00:20:51,370
Então, nesse caso,

240
00:20:51,370 --> 00:20:58,485
Vou adicionar este campo de erros de formulário.

241
00:20:58,485 --> 00:21:06,285
Então, para esse item específico no objeto JavaScript que eu defini aqui,

242
00:21:06,285 --> 00:21:13,180
eu adicionaria mensagens chave

243
00:21:13,180 --> 00:21:21,135
plus e espaço aqui.

244
00:21:21,135 --> 00:21:24,590
Então, agora qualquer pesquisa de erro formulário

245
00:21:24,590 --> 00:21:27,555
ou a mensagem correspondente será tomada e anexada em,

246
00:21:27,555 --> 00:21:32,350
e então meu objeto JavaScript erros formulário agora irá conter

247
00:21:32,350 --> 00:21:34,970
todas as mensagens de erro anexadas em conjunto quando

248
00:21:34,970 --> 00:21:39,780
este particular em valores alterados método ratos.

249
00:21:39,780 --> 00:21:44,430
Agora, este pedaço particular de código que eu peguei emprestado de

250
00:21:44,430 --> 00:21:50,560
a documentação de validação formulário em angular.iu.

251
00:21:50,560 --> 00:21:55,240
Descobri que esta é uma maneira muito intuitiva de fazer a verificação de erros de formulário.

252
00:21:55,240 --> 00:22:02,195
Então, eu pensei por que não fazer uso disso dentro do nosso exercício formas reativas angulares.

253
00:22:02,195 --> 00:22:05,515
Então, adicionando esse código lá.

254
00:22:05,515 --> 00:22:15,180
Agora, meu aplicativo está pronto para fazer a validação do formulário para o meu formulário reativo.

255
00:22:15,180 --> 00:22:22,500
Então, agora o próximo passo é ir para o componente de contato.html,

256
00:22:22,500 --> 00:22:25,805
o arquivo de modelo e, em seguida, atualize o arquivo de modelo.

257
00:22:25,805 --> 00:22:28,505
Então, indo para esse arquivo template,

258
00:22:28,505 --> 00:22:31,275
vamos agora para o formulário,

259
00:22:31,275 --> 00:22:39,100
e o neste formulário agora em vez de fazer todas essas verificações em código,

260
00:22:39,920 --> 00:22:48,165
agora podemos simplificar muito do código aqui no arquivo template aqui.

261
00:22:48,165 --> 00:22:50,550
Agora, em vez de fazer todas essas verificações,

262
00:22:50,550 --> 00:22:56,065
o que percebemos é que os erros de formulário objeto JavaScript em

263
00:22:56,065 --> 00:23:00,270
meu arquivo tipescript se houver erros, então

264
00:23:00,270 --> 00:23:05,610
os erros de formulário objeto JavaScript para esse campo particular,

265
00:23:05,610 --> 00:23:10,125
terá todas as mensagens de erro anexadas a ele.

266
00:23:10,125 --> 00:23:11,460
Se não houver erros,

267
00:23:11,460 --> 00:23:14,505
então essas mensagens de erro não estarão lá.

268
00:23:14,505 --> 00:23:17,860
Então, isso é o que eu vou usar para verificar e

269
00:23:17,860 --> 00:23:21,245
ver se eu devo exibir o erro de formulário ou não.

270
00:23:21,245 --> 00:23:24,685
Então, nesse caso, em vez de verificar tudo isso,

271
00:23:24,685 --> 00:23:34,740
a única coisa que eu preciso verificar aqui é forMerrors firstname, é isso.

272
00:23:34,740 --> 00:23:40,450
Então, muito fácil de verificar se há erros aqui.

273
00:23:41,110 --> 00:23:47,095
Da mesma forma, então todo este código agora é simplificado aqui,

274
00:23:47,095 --> 00:23:52,100
e da mesma forma quando você verificar a mensagem aqui,

275
00:23:52,100 --> 00:23:56,615
o que vamos fazer, eu vou mudar toda essa coisa de

276
00:23:56,615 --> 00:24:05,165
necessário tocado para formerrors.firstName.

277
00:24:05,165 --> 00:24:08,955
É isso. Se isso existe,

278
00:24:08,955 --> 00:24:14,760
então todas as mensagens de erro correspondentes a isso já estarão lá,

279
00:24:14,760 --> 00:24:19,620
então eu só preciso fazer interpolação e

280
00:24:19,620 --> 00:24:26,555
então exibir formerrors.FirstName aqui,

281
00:24:26,555 --> 00:24:28,385
tão simples quanto isso.

282
00:24:28,385 --> 00:24:30,240
Agora, você vê fazendo

283
00:24:30,240 --> 00:24:36,355
toda a validação de erro de formulário e código e fazendo todas as verificações e assim por diante no código,

284
00:24:36,355 --> 00:24:40,200
você já construiu as mensagens de erro que precisamos exibir.

285
00:24:40,200 --> 00:24:42,740
Tudo o que fazemos é pegar essa mensagem de erro e, em seguida, colocar

286
00:24:42,740 --> 00:24:45,745
isso no modelo aqui, é isso.

287
00:24:45,745 --> 00:24:50,105
O código do modelo torna-se mais simplificado neste caso particular,

288
00:24:50,105 --> 00:24:57,225
e também fazendo a validação do formulário usando o código datilografado,

289
00:24:57,225 --> 00:25:02,045
temos simplificado o modelo aqui ao mesmo tempo que podemos fazer

290
00:25:02,045 --> 00:25:09,165
validação de formulário mais complicado em nosso código datilografado.

291
00:25:09,165 --> 00:25:16,500
Eu vou ir em frente e fazer o mesmo tipo de alterações nos campos restantes aqui,

292
00:25:16,500 --> 00:25:20,460
assim, para o campo sobrenome,

293
00:25:20,460 --> 00:25:30,850
Eu vou substituir novamente toda essa coisa com formerrors.lastName.

294
00:25:34,100 --> 00:25:41,050
Agora, novamente faça a mesma coisa para o número de telefone.

295
00:25:41,330 --> 00:25:46,910
Agora, novamente como você vê a estrutura do modelo torna-se muito,

296
00:25:46,910 --> 00:25:50,230
muito uniforme neste caso.

297
00:25:50,230 --> 00:25:55,020
Então, isso também é outra maneira de simplificar

298
00:25:55,020 --> 00:26:01,660
a estrutura do seu modelo continuar para o campo de e-mail aqui.

299
00:26:01,660 --> 00:26:06,640
Vou fazer a mesma alteração no campo de e-mail também.

300
00:26:06,640 --> 00:26:10,430
Então, eu diria formerrors.email

301
00:26:12,470 --> 00:26:19,140
e substitua isso por formatters.email.

302
00:26:19,140 --> 00:26:20,995
Então, como você pode ver,

303
00:26:20,995 --> 00:26:28,455
seu código de modelo simplificou significativamente em comparação com antes.

304
00:26:28,455 --> 00:26:32,545
Com isso, toda a validação de erro que eu exijo

305
00:26:32,545 --> 00:26:36,600
foi adicionada ao meu modelo e meu modelo agora está atualizado,

306
00:26:36,600 --> 00:26:38,900
então vamos salvar as alterações.

307
00:26:39,560 --> 00:26:46,800
Duas outras coisas que preciso adicionar é o atributo

308
00:26:46,800 --> 00:26:53,255
chamado email para este campo específico chamado email.

309
00:26:53,255 --> 00:26:56,625
Então, lembre-se que adicionamos o Validador de e-mail aqui.

310
00:26:56,625 --> 00:26:58,300
Então, junto com o obrigatório,

311
00:26:58,300 --> 00:27:03,655
Eu vou adicionar e-mail também para o campo de entrada aqui.

312
00:27:03,655 --> 00:27:05,655
Da mesma forma, para o telnum,

313
00:27:05,655 --> 00:27:08,115
usamos o padrão lá.

314
00:27:08,115 --> 00:27:14,670
Então, eu vou adicionar no padrão então este é o campo de entrada para o telnum.

315
00:27:14,670 --> 00:27:24,485
Então, dentro do campo de entrada eu vou adicionar padrão é igual a e

316
00:27:24,485 --> 00:27:29,250
o padrão que eu vou adicionar é

317
00:27:29,250 --> 00:27:35,350
entre colchetes zero a nove,

318
00:27:35,350 --> 00:27:37,875
e depois colocar uma estrela lá.

319
00:27:37,875 --> 00:27:45,430
Então, o que significa que isso é qualquer coisa zero a nove repetido várias vezes.

320
00:27:45,430 --> 00:27:51,045
Então, o número de telefone pode conter qualquer número entre zero e nove.

321
00:27:51,045 --> 00:27:53,370
Qualquer número desses números.

322
00:27:53,370 --> 00:27:57,085
Você também pode colocar um minlength e maxlength no campo telnum

323
00:27:57,085 --> 00:28:01,100
se para o seu país específico o número de telefone tiver um formato fixo,

324
00:28:01,100 --> 00:28:02,440
você também pode fazer isso.

325
00:28:02,440 --> 00:28:05,410
Então, isso pode ser feito facilmente.

326
00:28:05,410 --> 00:28:08,130
Mas, neste exercício,

327
00:28:08,130 --> 00:28:13,470
Eu não adicionei na restrição minlength e maxlength para o telnum aqui.

328
00:28:13,470 --> 00:28:15,720
Agora, que fizemos todas as atualizações,

329
00:28:15,720 --> 00:28:23,150
vamos salvar as alterações e, em seguida, ir e dar uma olhada no formulário no navegador.

330
00:28:23,150 --> 00:28:25,640
Indo para o navegador agora,

331
00:28:25,640 --> 00:28:28,920
vamos rolar para baixo até o formulário aqui.

332
00:28:28,920 --> 00:28:34,775
Vamos digitar o primeiro nome e como você vê quando você digita apenas um único caractere,

333
00:28:34,775 --> 00:28:38,290
então a mensagem de erro é exibida imediatamente,

334
00:28:38,290 --> 00:28:42,490
mas no momento em que você digita caracteres adicionais essa mensagem de erro desaparecerá.

335
00:28:42,490 --> 00:28:44,980
Da mesma forma, para o sobrenome.

336
00:28:44,980 --> 00:28:50,794
Para o número de telefone, se você tentar digitar algo diferente de números,

337
00:28:50,794 --> 00:28:53,830
então as mensagens de erro serão exibidas.

338
00:28:54,240 --> 00:28:56,575
Então, você pode digitar,

339
00:28:56,575 --> 00:29:04,790
de forma semelhante para e-mail, para que você veja que o formato de e-mail não inválido será exibido.

340
00:29:04,790 --> 00:29:10,380
Se você não tiver o e-mail, ele também mostra a mensagem de erro.

341
00:29:10,380 --> 00:29:14,415
Mas, no momento em que você digita algo assim,

342
00:29:14,415 --> 00:29:18,745
então este é considerado um formato de e-mail válido para que ele seja aceito.

343
00:29:18,745 --> 00:29:23,895
Então, que é o conjunto de mensagens de erro e a validação de formulário

344
00:29:23,895 --> 00:29:30,080
feito completamente em código como feito neste exercício particular.

345
00:29:30,080 --> 00:29:33,625
Então, com isso, completamos este exercício.

346
00:29:33,625 --> 00:29:40,200
Neste exercício, vimos o uso da mudança de valor é observável,

347
00:29:40,200 --> 00:29:46,915
e também vimos como podemos fazer validação de formulário em nosso código datilografado.

348
00:29:46,915 --> 00:29:49,040
Isso conclui este exercício.

349
00:29:49,040 --> 00:29:52,030
Este é um bom momento para você fazer um commit git com

350
00:29:52,030 --> 00:29:56,310
a mensagem reativa forma parte três.