1
00:00:03,650 --> 00:00:09,630
Habíamos tratado con formas reactivas en una de las lecciones anteriores,

2
00:00:09,630 --> 00:00:14,420
donde hicimos dos ejercicios relacionados con formas reactivas,

3
00:00:14,420 --> 00:00:15,695
cómo las creamos,

4
00:00:15,695 --> 00:00:20,530
y luego también hacemos alguna validación básica de formas reactivas.

5
00:00:20,530 --> 00:00:24,525
Continuaremos con el tema de esta lección,

6
00:00:24,525 --> 00:00:28,790
porque las formas reactivas como su nombre lo indica,

7
00:00:28,790 --> 00:00:33,019
tiene algo que ver con la programación reactiva como usted podría haber esperado.

8
00:00:33,019 --> 00:00:42,429
Ahora, las formas reactivas también le permiten observar cambios en los valores de los elementos del formulario,

9
00:00:42,429 --> 00:00:48,320
usando un observable que Angular pone a disposición llamado ValueChanges.

10
00:00:48,320 --> 00:00:53,450
Vamos a hacer uso de ValueChanges observable en este ejercicio,

11
00:00:53,450 --> 00:00:57,080
con el fin de realizar un seguimiento de los cambios en los valores de

12
00:00:57,080 --> 00:01:01,650
sus diversos elementos de formulario y luego activar inmediatamente la validación de formulario.

13
00:01:01,650 --> 00:01:06,350
En este ejercicio vamos a hacer la mayor parte de la validación del formulario en código

14
00:01:06,350 --> 00:01:11,120
en lugar de en la propia plantilla,

15
00:01:11,120 --> 00:01:19,189
como hicimos con la validación del formulario del reactor en el segundo ejercicio de formas reactivas.

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

17
00:01:24,115 --> 00:01:29,720
vamos a actualizar la forma reactiva que hemos creado aquí,

18
00:01:29,720 --> 00:01:34,445
añadiendo algunos validadores más para algunos de estos campos.

19
00:01:34,445 --> 00:01:38,915
Por lo tanto, aquí ves que para el primer apellido y

20
00:01:38,915 --> 00:01:43,465
el número de teléfono y el correo electrónico hemos añadido los validadores requeridos.

21
00:01:43,465 --> 00:01:45,290
Para el nombre y el apellido,

22
00:01:45,290 --> 00:01:48,500
voy a añadir un par de validadores más para

23
00:01:48,500 --> 00:01:52,315
la longitud mínima y la longitud máxima.

24
00:01:52,315 --> 00:01:57,185
Ahora, si tiene más de un Validador en su forma reactiva,

25
00:01:57,185 --> 00:02:04,470
tiene que declararlos usando una matriz allí.

26
00:02:04,470 --> 00:02:08,385
Entonces, esto tiene que estar encerrado dentro de una matriz aquí.

27
00:02:08,385 --> 00:02:12,790
Entonces, verá que he incluido el validador requerido dentro de una matriz.

28
00:02:12,790 --> 00:02:21,300
Voy a agregar un Validators, minLength Validator.

29
00:02:21,300 --> 00:02:25,250
Por lo tanto, para la longitud mínima especificaré dos como la longitud mínima,

30
00:02:25,250 --> 00:02:28,925
por lo que el nombre debe contener al menos dos caracteres.

31
00:02:28,925 --> 00:02:36,645
También la longitud máxima que voy a

32
00:02:36,645 --> 00:02:48,035
añadir como 25 caracteres.

33
00:02:48,035 --> 00:02:52,740
Entonces, aquí ves que ahora para el primer nombre tenemos tres validaciones diferentes,

34
00:02:52,740 --> 00:02:55,455
todas encerradas en una matriz aquí.

35
00:02:55,455 --> 00:02:58,620
Se requieren validadores, validadores minLength,

36
00:02:58,620 --> 00:03:02,135
y validadores maxLength aquí, 25.

37
00:03:02,135 --> 00:03:05,900
Por lo tanto, voy a hacer lo mismo también por mi apellido.

38
00:03:05,900 --> 00:03:11,115
Así que, permítanme copiar todo este rayo de validadores aquí,

39
00:03:11,115 --> 00:03:21,420
y luego reemplazar este con ese conjunto de validadores.

40
00:03:21,420 --> 00:03:25,330
Ahora, además, para el número de teléfono,

41
00:03:25,330 --> 00:03:29,060
como recordarías en la versión anterior del formulario,

42
00:03:29,060 --> 00:03:35,395
el número de teléfono estaba dispuesto a aceptar incluso alfabetos,

43
00:03:35,395 --> 00:03:37,015
pero eso no es correcto.

44
00:03:37,015 --> 00:03:40,070
Los números de teléfono suelen ser números.

45
00:03:40,070 --> 00:03:43,955
Por lo tanto, aquí es donde usaremos otro Validador

46
00:03:43,955 --> 00:03:53,005
llamado Validadores de patrón.

47
00:03:53,005 --> 00:03:57,890
Por lo tanto, el Validador de patrón nos permite especificar un patrón para

48
00:03:57,890 --> 00:04:02,719
los valores introducidos en ese elemento de formulario en particular,

49
00:04:02,719 --> 00:04:09,465
y luego verificar para asegurarse de que el valor sigue el patrón especificado.

50
00:04:09,465 --> 00:04:12,470
Por lo tanto, aquí el patrón que vamos a utilizar es que el valor

51
00:04:12,470 --> 00:04:17,180
debe contener sólo números entre cero y nueve.

52
00:04:17,180 --> 00:04:19,015
Para agregar el patrón,

53
00:04:19,015 --> 00:04:23,860
tenemos que hacer eso en el archivo de plantilla como veremos en poco tiempo.

54
00:04:23,860 --> 00:04:26,415
Del mismo modo, para el correo electrónico,

55
00:04:26,415 --> 00:04:31,635
también tendré otro Validador llamado como el Validador de correo electrónico.

56
00:04:31,635 --> 00:04:35,035
Por lo tanto, añadiremos en el correo electrónico de Validators.

57
00:04:35,035 --> 00:04:40,010
Esto también significa que tenemos que añadir un atributo

58
00:04:40,010 --> 00:04:44,990
llamado correo electrónico a la entrada en nuestro archivo de plantilla.

59
00:04:44,990 --> 00:04:53,145
Ahora, con estos cambios, mi validación de formularios se ha vuelto más robusta en este ejercicio.

60
00:04:53,145 --> 00:04:59,534
Ahora, cuando el formulario experimenta cambios en cualquiera de sus elementos de formulario,

61
00:04:59,534 --> 00:05:09,530
, entonces el marco angular proporciona un observable llamado ValueChanges observable.

62
00:05:09,530 --> 00:05:16,150
Entonces, voy a usar el valor observable ValueChanges en mi formulario de comentarios.

63
00:05:16,550 --> 00:05:19,770
Entonces, el ValueChanges observable.

64
00:05:19,770 --> 00:05:26,640
Por lo tanto, el observable ValueChanges ahora se puede suscribir dentro de este método en particular.

65
00:05:26,640 --> 00:05:28,415
Así que cuando creamos el formulario en sí,

66
00:05:28,415 --> 00:05:31,520
nos suscribiremos a los valores observables aquí.

67
00:05:31,520 --> 00:05:33,470
Ahora, cuando ValueChanges,

68
00:05:33,470 --> 00:05:38,274
así que suscribiéndose a este observable,

69
00:05:38,274 --> 00:05:44,630
dentro de la suscripción especificaré lo que se debe hacer cuando los ValueChanges.

70
00:05:44,630 --> 00:05:49,160
Entonces, cuando valueChanges obtendría algunos datos aquí,

71
00:05:49,160 --> 00:05:52,055
de la granja para indicar

72
00:05:52,055 --> 00:05:59,050
qué elemento de forma particular ha experimentado el cambio en el valor.

73
00:05:59,050 --> 00:06:00,665
Luego, cuando eso suceda,

74
00:06:00,665 --> 00:06:07,865
voy a activar un método local que implementaré llamado onValueChanged,

75
00:06:07,865 --> 00:06:13,165
y luego suministraré esos datos como un parámetro para este método.

76
00:06:13,165 --> 00:06:16,455
Ahora, dentro de este método onValueChanged,

77
00:06:16,455 --> 00:06:20,445
voy a iniciar la validación del formulario,

78
00:06:20,445 --> 00:06:27,155
y luego definir adecuadamente los mensajes de error del formulario en función de lo que

79
00:06:27,155 --> 00:06:35,380
este objeto de datos que obtengo aquí me especificará.

80
00:06:35,380 --> 00:06:39,125
Además, cuando creo por primera vez el formulario,

81
00:06:39,125 --> 00:06:47,114
Llamaré al método onValueChanged sin ningún parámetro,

82
00:06:47,114 --> 00:06:50,250
y esto se usaría para

83
00:06:50,250 --> 00:06:58,615
restablecer mensajes de validación de formularios.

84
00:06:58,615 --> 00:07:02,195
Ahora, ¿cómo creo los mensajes de validación de formularios?

85
00:07:02,195 --> 00:07:09,230
Para hacer eso, voy a definir mis mensajes de validación de formularios completamente en código aquí.

86
00:07:09,230 --> 00:07:12,620
Luego, a través del código,

87
00:07:12,620 --> 00:07:15,920
adaptaremos los mensajes de validación del formulario,

88
00:07:15,920 --> 00:07:23,785
y que luego se usarían para mostrar los mensajes de error en mi plantilla de formulario.

89
00:07:23,785 --> 00:07:33,830
Entonces, para hacer eso, lo que voy a hacer es agregar algunos objetos JavaScript aquí.

90
00:07:33,830 --> 00:07:42,485
Uno de los objetos JavaScript que voy a agregar se denomina como errores de formulario.

91
00:07:42,485 --> 00:07:46,790
Entonces, este es un simple objeto JavaScript que

92
00:07:46,790 --> 00:07:52,315
contendrá todos los errores para el formulario particular aquí.

93
00:07:52,315 --> 00:07:54,799
Así que dentro de los errores de formulario,

94
00:07:54,799 --> 00:08:02,609
usaré cuatro campos diferentes,

95
00:08:02,609 --> 00:08:11,275
nombre, apellido.

96
00:08:11,275 --> 00:08:13,305
Así que como usted recuerda,

97
00:08:13,305 --> 00:08:21,889
estos corresponden a los cuatro elementos del formulario en los que estoy haciendo la validación del formulario,

98
00:08:21,889 --> 00:08:30,470
número de teléfono y correo electrónico.

99
00:08:30,470 --> 00:08:35,020
Ahora, ¿por qué defino este objeto JavaScript aquí?

100
00:08:35,020 --> 00:08:41,075
Ahora, este objeto JavaScript como ves contiene cuatro elementos aquí.

101
00:08:41,075 --> 00:08:44,270
Ahora, cada vez que hago la validación del formulario,

102
00:08:44,270 --> 00:08:47,090
recuerdo que ya especificé que

103
00:08:47,090 --> 00:08:50,915
voy a crear un nuevo método llamado onValueChange.

104
00:08:50,915 --> 00:08:55,145
Dentro de OnValueChange, la forma en que se escribe el código es que,

105
00:08:55,145 --> 00:08:58,300
si se detecta algún error,

106
00:08:58,300 --> 00:09:02,315
una cadena que contiene el mensaje correspondiente a

107
00:09:02,315 --> 00:09:08,135
ese error se agregará a este objeto JavaScript.

108
00:09:08,135 --> 00:09:10,535
Entonces, de esta manera dentro de mi código,

109
00:09:10,535 --> 00:09:13,204
puedo hacer la validación del formulario.

110
00:09:13,204 --> 00:09:15,315
Ahora, además de esto,

111
00:09:15,315 --> 00:09:21,150
voy a definir algunos mensajes de validación.

112
00:09:21,840 --> 00:09:27,100
Ahora, este patrón particular de hacer cosas,

113
00:09:27,100 --> 00:09:36,345
aprendí leyendo la documentación sobre validación de formularios en el sitio web angular.io.

114
00:09:36,345 --> 00:09:43,020
Por lo tanto, tienen toda una documentación sobre cómo hacer la validación de formularios y un enlace al que está

115
00:09:43,020 --> 00:09:45,315
disponible en los recursos adicionales de

116
00:09:45,315 --> 00:09:50,510
este capítulo y también en los capítulos anteriores sobre formas angulares.

117
00:09:50,510 --> 00:09:55,950
Entonces, allí en ese documento en particular

118
00:09:55,950 --> 00:10:02,655
prescriben esto como una forma de hacer la validación de formularios y encontré que era muy intuitivo.

119
00:10:02,655 --> 00:10:08,640
Entonces, también adopté el mismo patrón para hacer la validación de formularios en el código.

120
00:10:08,640 --> 00:10:10,500
Así que, junto con aquí,

121
00:10:10,500 --> 00:10:20,515
voy a definir los mensajes de validación para todos los campos posibles aquí.

122
00:10:20,515 --> 00:10:22,475
Así que, para el campo de nombre,

123
00:10:22,475 --> 00:10:30,050
voy a definir algunos mensajes de validación aquí, así que yo diría,

124
00:10:30,050 --> 00:10:32,965
«requerido» y luego decir,

125
00:10:32,965 --> 00:10:39,940
«se requiere nombre» como este,

126
00:10:39,940 --> 00:10:48,790
Voy a añadir en algunos mensajes de validación

127
00:10:48,790 --> 00:10:52,030
aquí y decir,

128
00:10:52,030 --> 00:10:57,070
«El nombre debe ser

129
00:10:57,070 --> 00:11:05,770
al menos 2 caracteres de largo» y luego yo también agregará,

130
00:11:05,770 --> 00:11:15,700
«longitud máxima» y el mensaje correspondiente sería,

131
00:11:15,700 --> 00:11:23,630
«Nombre no puede ser más de 25".

132
00:11:24,780 --> 00:11:29,685
Si tienes un nombre que tiene 25 caracteres,

133
00:11:29,685 --> 00:11:35,115
debes estar maldiciendo a tus padres por eso, créanme,

134
00:11:35,115 --> 00:11:39,670
uno de mis dos nombres es un segundo nombre largo,

135
00:11:39,670 --> 00:11:46,035
y que no uso explícitamente en mis documentos.

136
00:11:46,035 --> 00:11:48,870
Pero, puedo entender el dolor,

137
00:11:48,870 --> 00:11:55,450
si tienes un nombre largo mayor que 25 caracteres.

138
00:11:56,700 --> 00:12:02,900
Personas de algunos estados del sur de la India tienen nombres largos,

139
00:12:03,690 --> 00:12:06,870
mi estado incluido, hey,

140
00:12:06,870 --> 00:12:09,270
vamos a divertirnos mientras estamos en ello.

141
00:12:09,270 --> 00:12:17,180
Vale, también voy a incluir lo mismo para el apellido.

142
00:12:17,180 --> 00:12:23,380
Entonces, voy a editar este

143
00:12:23,380 --> 00:12:33,430
y especificar lo mismo que el apellido.

144
00:12:33,430 --> 00:12:39,020
Entonces, como ve dentro del código, puede especificar un conjunto de mensajes de error.

145
00:12:39,020 --> 00:12:42,855
Ahora, si agrega nueva validación a sus formularios,

146
00:12:42,855 --> 00:12:44,505
todo lo que necesita hacer es,

147
00:12:44,505 --> 00:12:47,230
venga aquí y agregue el nuevo mensaje de error en

148
00:12:47,230 --> 00:12:54,635
este objeto JavaScript aquí y su código funcionará bien, como tal.

149
00:12:54,635 --> 00:13:03,015
Entonces, esa es la ventaja de usar este patrón para diseñar su validación en código.

150
00:13:03,015 --> 00:13:09,835
Continuando, permítanme definir la validación para el número de teléfono y

151
00:13:09,835 --> 00:13:17,700
las dos validaciones para los números de teléfono que sucedería es la «requerida».

152
00:13:17,700 --> 00:13:22,390
Entonces, solo voy a copiar el «requerido» desde allí,

153
00:13:22,390 --> 00:13:24,170
y pegarlo aquí,

154
00:13:24,170 --> 00:13:27,215
y yo diría,

155
00:13:27,215 --> 00:13:36,910
«El número de teléfono es obligatorio», y el siguiente mensaje de error sería para «patrón».

156
00:13:36,910 --> 00:13:42,585
Por lo tanto, el mensaje de error dice,

157
00:13:42,585 --> 00:13:50,770
«El número de teléfono debe contener sólo números».

158
00:13:50,910 --> 00:13:58,070
Entonces, ese es el otro mensaje, de manera similar para el correo electrónico.

159
00:13:58,070 --> 00:14:03,109
Entonces, como puede ver, los valores que estoy usando aquí

160
00:14:03,109 --> 00:14:08,430
corresponden a los nombres del Validador que he usado,

161
00:14:08,430 --> 00:14:12,305
«longitud media», «longitud máxima requerida», «patrón».

162
00:14:12,305 --> 00:14:14,280
Así que, de manera similar para el correo electrónico,

163
00:14:14,280 --> 00:14:18,720
verías «requerido» y «Correo electrónico'.

164
00:14:18,720 --> 00:14:28,615
Entonces, solo voy a copiar el «requerido» aquí y decir, «Se requiere correo electrónico».

165
00:14:28,615 --> 00:14:36,020
El otro patrón como usted recuerda es para el correo electrónico y yo diría,

166
00:14:36,020 --> 00:14:40,865
«Correo electrónico no en formato válido».

167
00:14:40,865 --> 00:14:43,200
Por lo tanto, normalmente si su correo electrónico no contiene

168
00:14:43,200 --> 00:14:48,190
un signo @ y caracteres en ambos lados del signo @,

169
00:14:48,190 --> 00:14:50,230
entonces eso no es un correo electrónico válido.

170
00:14:50,230 --> 00:14:58,265
Este validador de correo electrónico ya está integrado en el módulo de formas reactivas angulares.

171
00:14:58,265 --> 00:15:02,240
Por lo tanto, haremos uso del validador de correo electrónico aquí.

172
00:15:02,240 --> 00:15:07,450
Entonces, aquí tenemos todos los mensajes de validación definidos en código.

173
00:15:07,450 --> 00:15:14,340
Por lo tanto, eso hace que sea muy fácil extenderlos para campos adicionales si lo requiere y también

174
00:15:14,340 --> 00:15:17,770
agregando más mensajes de validación para validaciones adicionales

175
00:15:17,770 --> 00:15:21,865
que podría introducir para cada uno de esos campos de formulario.

176
00:15:21,865 --> 00:15:25,785
Además, estos errores de formulario de objeto me ayudan a rastrear

177
00:15:25,785 --> 00:15:31,415
todos los errores asociados con cada uno de los elementos en mi teléfono.

178
00:15:31,415 --> 00:15:34,390
Así que, actualmente solo compruebo estos cuatro elementos,

179
00:15:34,390 --> 00:15:37,165
así que es por eso que solo tengo para eso.

180
00:15:37,165 --> 00:15:42,365
Corrección menor, la «longitud media» debe ser min,

181
00:15:42,365 --> 00:15:45,910
pequeña 'l' y longitud máxima también con una 'l' pequeña,

182
00:15:45,910 --> 00:15:48,140
de manera similar para el apellido también.

183
00:15:48,140 --> 00:15:53,750
Ahora, vamos a escribir el código para el método on values changed.

184
00:15:53,750 --> 00:15:55,765
Entonces, voy a escribir el método

185
00:15:55,765 --> 00:16:02,860
aquí, "ValueChanged» y luego este

186
00:16:02,860 --> 00:16:08,275
tomará un parámetro, posiblemente.

187
00:16:08,275 --> 00:16:10,900
Es por eso que puse un signo de interrogación de datos,

188
00:16:10,900 --> 00:16:16,760
, lo que significa que el parámetro es opcional.

189
00:16:17,760 --> 00:16:27,610
Así que, lo primero que voy a comprobar es, «este formulario de retroalimentación»,

190
00:16:27,610 --> 00:16:32,290
lo que significa que si el formulario de retroalimentación no ha sido creado entonces,

191
00:16:32,290 --> 00:16:34,960
y si se llama a este método,

192
00:16:34,960 --> 00:16:42,130
entonces usted simplemente debe «volver» sin nada.

193
00:16:42,130 --> 00:16:50,680
Entonces, definiré una constante

194
00:16:50,680 --> 00:16:56,780
llamada «este feedback

195
00:16:56,780 --> 00:17:03,025
form» es solo para que sea fácil definir el resto del código,

196
00:17:03,025 --> 00:17:05,380
entonces yo diría, «para

197
00:17:06,240 --> 00:17:16,330
const field in this.form errors».

198
00:17:16,330 --> 00:17:21,510
Por lo tanto, observe que este campo tomará estos errores de.form,

199
00:17:21,510 --> 00:17:24,710
el objeto de errores de formulario que hemos definido anteriormente.

200
00:17:24,710 --> 00:17:28,150
Por lo tanto, sentir significa que voy a comprobar los cuatro.

201
00:17:28,150 --> 00:17:29,890
Así que, cada vez que detecto cualquier cambio,

202
00:17:29,890 --> 00:17:31,260
el nombre, el apellido,

203
00:17:31,260 --> 00:17:32,820
número de teléfono y un correo electrónico.

204
00:17:32,820 --> 00:17:41,080
Entonces, es por eso que estos cuatro llevarán exactamente los mismos nombres que usamos en el formulario aquí,

205
00:17:41,080 --> 00:17:50,330
y para que el código escrito aquí sea sencillo de trabajar.

206
00:17:52,770 --> 00:17:56,650
Por lo tanto, ahora voy a comprobar los campos del formulario.

207
00:17:56,650 --> 00:18:07,090
Entonces, primero

208
00:18:07,090 --> 00:18:16,000
me aseguraría de que en caso de que haya adjuntado algún mensaje a estos campos de formulario,

209
00:18:16,000 --> 00:18:17,810
errores de formulario objeto allí,

210
00:18:17,810 --> 00:18:19,665
luego voy a borrar todos ellos.

211
00:18:19,665 --> 00:18:23,830
Entonces, es por eso que si llamas a esto sin parámetro,

212
00:18:23,830 --> 00:18:26,600
se borrarán todos los campos de error de formulario,

213
00:18:26,600 --> 00:18:36,335
y luego haría, «controlar FormGet».

214
00:18:36,335 --> 00:18:44,330
Entonces, observe que estoy usando ese campo en sí para hacer un FormGet, así que

215
00:18:44,330 --> 00:18:48,530
estoy obteniendo acceso a ese campo de formulario en particular.

216
00:18:48,530 --> 00:18:52,090
Por lo tanto, observe que antes estábamos haciendo «feedbackform.this.feedbackform.get"firstname».

217
00:18:58,930 --> 00:19:04,870
y así sucesivamente. Por lo tanto, he simplificado qué en esta constante particular que definimos

218
00:19:04,870 --> 00:19:13,000
aquí y luego diré, «Si el control».

219
00:19:13,000 --> 00:19:22,645
Entonces, lo que significa que si el control no es nulo y «control.dirty».

220
00:19:22,645 --> 00:19:28,150
Entonces, si ese campo en particular ya está sucio

221
00:19:28,150 --> 00:19:33,635
y no «control válido».

222
00:19:33,635 --> 00:19:36,280
Entonces, significa que para cada uno de los campos,

223
00:19:36,280 --> 00:19:39,780
estoy literalmente comprobando para ver si es válido,

224
00:19:39,780 --> 00:19:40,840
si está sucio,

225
00:19:40,840 --> 00:19:44,260
y luego si el control ya está allí.

226
00:19:44,260 --> 00:19:48,430
Entonces, voy a verificar qué tipo de errores se han agregado a

227
00:19:48,430 --> 00:19:53,185
este control particular por el formulario allí.

228
00:19:53,185 --> 00:19:55,045
Así que, aquí voy a decir,

229
00:19:55,045 --> 00:19:59,500
«mensajes const iguales

230
00:19:59,500 --> 00:20:06,560
a este campo de mensajes de validación».

231
00:20:07,260 --> 00:20:10,635
Observe cómo estoy recogiendo

232
00:20:10,635 --> 00:20:15,785
todos los mensajes de validación correspondientes a ese campo particular firstname,

233
00:20:15,785 --> 00:20:19,370
lastname, o telnum o email,

234
00:20:19,370 --> 00:20:23,585
y luego verificaré y veré si necesito agregar esto al campo.

235
00:20:23,585 --> 00:20:25,050
Entonces, ¿cómo hago eso?

236
00:20:25,050 --> 00:20:35,360
Entonces, lo hacemos para clave const en control.errors.

237
00:20:35,360 --> 00:20:45,510
Entonces, observe que este control es el campo de retroalimentación form.get y.error,

238
00:20:45,510 --> 00:20:48,980
, así que estoy verificando si hay algún error allí.

239
00:20:48,980 --> 00:20:51,370
Entonces, en ese caso,

240
00:20:51,370 --> 00:20:58,485
agregaré este campo de errores de formulario.

241
00:20:58,485 --> 00:21:06,285
Entonces, para ese elemento en particular en el objeto JavaScript que he definido aquí,

242
00:21:06,285 --> 00:21:13,180
agregaría mensajes clave

243
00:21:13,180 --> 00:21:21,135
plus y espacio aquí.

244
00:21:21,135 --> 00:21:24,590
Así que, ahora cualquier encuesta de error de formulario

245
00:21:24,590 --> 00:21:27,555
o el mensaje correspondiente será tomado y adjuntado en,

246
00:21:27,555 --> 00:21:32,350
y luego mi formulario errores de objeto JavaScript ahora contendrá

247
00:21:32,350 --> 00:21:34,970
todos los mensajes de error adjuntos juntos cuando

248
00:21:34,970 --> 00:21:39,780
este particular en valores cambiado ratas método.

249
00:21:39,780 --> 00:21:44,430
Ahora, esta pieza particular de código que he tomado prestado de

250
00:21:44,430 --> 00:21:50,560
la documentación de validación de formularios en angular.iu.

251
00:21:50,560 --> 00:21:55,240
Descubrí que esta es una forma muy intuitiva de hacer la comprobación de errores de formulario.

252
00:21:55,240 --> 00:22:02,195
Entonces, pensé por qué no hacer uso de eso dentro de nuestro ejercicio de formas reactivas angulares.

253
00:22:02,195 --> 00:22:05,515
Entonces, agregando este código allí.

254
00:22:05,515 --> 00:22:15,180
Ahora, mi aplicación está lista para hacer la validación del formulario para mi formulario reactivo.

255
00:22:15,180 --> 00:22:22,500
Entonces, ahora el siguiente paso es ir al componente de contacto.html,

256
00:22:22,500 --> 00:22:25,805
el archivo de plantilla y, a continuación, actualice el archivo de plantilla.

257
00:22:25,805 --> 00:22:28,505
Así que, yendo a ese archivo de plantilla,

258
00:22:28,505 --> 00:22:31,275
ahora vamos a ir al formulario,

259
00:22:31,275 --> 00:22:39,100
y el en este formulario ahora en lugar de hacer todas estas comprobaciones en el código,

260
00:22:39,920 --> 00:22:48,165
ahora podemos simplificar gran parte del código aquí en el archivo de plantilla aquí.

261
00:22:48,165 --> 00:22:50,550
Ahora, en lugar de hacer todas estas comprobaciones,

262
00:22:50,550 --> 00:22:56,065
lo que nos damos cuenta es que el objeto JavaScript de errores de formulario en

263
00:22:56,065 --> 00:23:00,270
mi archivo mecanografiado si hay errores, entonces

264
00:23:00,270 --> 00:23:05,610
el objeto JavaScript de errores de formulario para ese campo en particular,

265
00:23:05,610 --> 00:23:10,125
tendrá todos los mensajes de error adjuntos a él.

266
00:23:10,125 --> 00:23:11,460
Si no hay errores,

267
00:23:11,460 --> 00:23:14,505
entonces esos mensajes de error no estarán allí.

268
00:23:14,505 --> 00:23:17,860
Entonces, eso es lo que voy a usar para verificar y

269
00:23:17,860 --> 00:23:21,245
ver si debería mostrar el error de formulario o no.

270
00:23:21,245 --> 00:23:24,685
Entonces, para ese caso en lugar de verificar todo esto,

271
00:23:24,685 --> 00:23:34,740
lo único que necesito verificar aquí es formErrors firstname, eso es todo.

272
00:23:34,740 --> 00:23:40,450
Por lo tanto, muy fácil de comprobar si hay errores aquí.

273
00:23:41,110 --> 00:23:47,095
Del mismo modo, por lo que todo este código ahora se simplifica aquí,

274
00:23:47,095 --> 00:23:52,100
y de manera similar cuando verifica el mensaje aquí,

275
00:23:52,100 --> 00:23:56,615
lo que vamos a hacer, voy a cambiar todo esto de

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

277
00:24:05,165 --> 00:24:08,955
Eso es todo. Si eso existe,

278
00:24:08,955 --> 00:24:14,760
, entonces todos los mensajes de error correspondientes a esto ya estarán allí,

279
00:24:14,760 --> 00:24:19,620
, así que solo necesito hacer interpolación y

280
00:24:19,620 --> 00:24:26,555
luego mostrar formErrors.FirstName aquí,

281
00:24:26,555 --> 00:24:28,385
tan simple como eso.

282
00:24:28,385 --> 00:24:30,240
Ahora, ves haciendo

283
00:24:30,240 --> 00:24:36,355
toda la validación de errores de formulario y código y haciendo todas las comprobaciones y así sucesivamente en el código,

284
00:24:36,355 --> 00:24:40,200
ya has construido los mensajes de error que necesitamos mostrar.

285
00:24:40,200 --> 00:24:42,740
Todo lo que hacemos es tomar ese mensaje de error y luego poner

286
00:24:42,740 --> 00:24:45,745
esto en la plantilla aquí, eso es todo.

287
00:24:45,745 --> 00:24:50,105
El código de la plantilla se simplifica más en este caso particular,

288
00:24:50,105 --> 00:24:57,225
y también haciendo la validación del formulario usando el código mecanografiado,

289
00:24:57,225 --> 00:25:02,045
hemos simplificado la plantilla aquí al mismo tiempo que podemos hacer

290
00:25:02,045 --> 00:25:09,165
validación de formularios más complicada en nuestro código mecanografiado.

291
00:25:09,165 --> 00:25:16,500
Voy a seguir adelante y hacer el mismo tipo de cambios en los campos restantes aquí,

292
00:25:16,500 --> 00:25:20,460
así que para el campo apellido,

293
00:25:20,460 --> 00:25:30,850
voy a volver a reemplazar todo esto con formErrors.lastName.

294
00:25:34,100 --> 00:25:41,050
Ahora, de nuevo hacer lo mismo para el número de teléfono.

295
00:25:41,330 --> 00:25:46,910
Ahora, de nuevo como ves la estructura de la plantilla se vuelve muy,

296
00:25:46,910 --> 00:25:50,230
muy uniforme en este caso.

297
00:25:50,230 --> 00:25:55,020
Por lo tanto, esa también es otra forma de simplificar

298
00:25:55,020 --> 00:26:01,660
la estructura de su plantilla continuando con el campo de correo electrónico aquí.

299
00:26:01,660 --> 00:26:06,640
Voy a hacer el mismo cambio en el campo de correo electrónico también.

300
00:26:06,640 --> 00:26:10,430
Entonces, diría formErrors.email

301
00:26:12,470 --> 00:26:19,140
y reemplace esto por formatters.email.

302
00:26:19,140 --> 00:26:20,995
Así que como puede ver,

303
00:26:20,995 --> 00:26:28,455
su código de plantilla se ha simplificado significativamente en comparación con antes.

304
00:26:28,455 --> 00:26:32,545
Con esto toda la validación de errores que requiero

305
00:26:32,545 --> 00:26:36,600
se ha agregado a mi plantilla y mi plantilla ahora está actualizada,

306
00:26:36,600 --> 00:26:38,900
así que vamos a guardar los cambios.

307
00:26:39,560 --> 00:26:46,800
Otras dos cosas que necesito agregar es el atributo

308
00:26:46,800 --> 00:26:53,255
llamado correo electrónico a este campo particular llamado correo electrónico.

309
00:26:53,255 --> 00:26:56,625
Por lo tanto, recuerde que hemos añadido el validador de correo electrónico aquí.

310
00:26:56,625 --> 00:26:58,300
Así que, junto con lo requerido,

311
00:26:58,300 --> 00:27:03,655
voy a agregar el correo electrónico también al campo de entrada aquí.

312
00:27:03,655 --> 00:27:05,655
Del mismo modo, para el telnum,

313
00:27:05,655 --> 00:27:08,115
usamos el patrón allí.

314
00:27:08,115 --> 00:27:14,670
Entonces, voy a agregar el patrón para que este es el campo de entrada para el telnum.

315
00:27:14,670 --> 00:27:24,485
Entonces, dentro del campo de entrada voy a agregar el patrón es igual y

316
00:27:24,485 --> 00:27:29,250
el patrón que voy a agregar es

317
00:27:29,250 --> 00:27:35,350
entre corchetes cero a nueve,

318
00:27:35,350 --> 00:27:37,875
y luego poner una estrella allí.

319
00:27:37,875 --> 00:27:45,430
Entonces, lo que significa que esto es algo cero a nueve repetidos varias veces.

320
00:27:45,430 --> 00:27:51,045
Por lo tanto, el número de teléfono puede contener cualquier número entre cero y nueve.

321
00:27:51,045 --> 00:27:53,370
Cualquier número de esos números.

322
00:27:53,370 --> 00:27:57,085
También puedes poner un minlength y maxlength en el campo telnum

323
00:27:57,085 --> 00:28:01,100
si para tu país particular el número de teléfono tiene un formato fijo,

324
00:28:01,100 --> 00:28:02,440
también puedes hacerlo.

325
00:28:02,440 --> 00:28:05,410
Por lo tanto, eso se puede hacer fácilmente.

326
00:28:05,410 --> 00:28:08,130
Pero, en este ejercicio,

327
00:28:08,130 --> 00:28:13,470
no agregué la restricción minlength y maxlength para el telnum aquí.

328
00:28:13,470 --> 00:28:15,720
Ahora, que hemos hecho todas las actualizaciones,

329
00:28:15,720 --> 00:28:23,150
vamos a guardar los cambios y luego ir a echar un vistazo al formulario en el navegador.

330
00:28:23,150 --> 00:28:25,640
Al ir al navegador ahora,

331
00:28:25,640 --> 00:28:28,920
vamos a desplazarnos hacia abajo al formulario aquí.

332
00:28:28,920 --> 00:28:34,775
Vamos a escribir el nombre y como ves cuando escribes un solo carácter,

333
00:28:34,775 --> 00:28:38,290
entonces el mensaje de error se muestra inmediatamente,

334
00:28:38,290 --> 00:28:42,490
pero en el momento en que escribes caracteres adicionales ese mensaje de error desaparecerá.

335
00:28:42,490 --> 00:28:44,980
Del mismo modo, para el apellido.

336
00:28:44,980 --> 00:28:50,794
Para el número de teléfono, si intenta escribir algo que no sea números,

337
00:28:50,794 --> 00:28:53,830
aparecerán los mensajes de error.

338
00:28:54,240 --> 00:28:56,575
Por lo tanto, puede escribir,

339
00:28:56,575 --> 00:29:04,790
de manera similar para el correo electrónico, para que vea que el formato del correo electrónico no es válido se mostrará.

340
00:29:04,790 --> 00:29:10,380
Si no tienes el correo electrónico, también muestra el mensaje de error.

341
00:29:10,380 --> 00:29:14,415
Pero, en el momento en que escribes algo como esto,

342
00:29:14,415 --> 00:29:18,745
entonces esto se considera un formato de correo electrónico válido por lo que será aceptado.

343
00:29:18,745 --> 00:29:23,895
Entonces, ese es el conjunto de mensajes de error y la validación del formulario

344
00:29:23,895 --> 00:29:30,080
hecho completamente en código como se hizo en este ejercicio en particular.

345
00:29:30,080 --> 00:29:33,625
Así que, con esto, completamos este ejercicio.

346
00:29:33,625 --> 00:29:40,200
En este ejercicio, hemos visto que el uso del cambio de valor es observable,

347
00:29:40,200 --> 00:29:46,915
y también vimos cómo podemos hacer validación de formularios en nuestro código mecanografiado.

348
00:29:46,915 --> 00:29:49,040
Esto completa este ejercicio.

349
00:29:49,040 --> 00:29:52,030
Este es un buen momento para que hagas un commit de git con

350
00:29:52,030 --> 00:29:56,310
, el mensaje reactivo forma la tercera parte.