1
00:00:00,180 --> 00:00:03,270
Bienvenidos en esta clase, vamos a ver cómo validar nuestro formulario.

2
00:00:03,390 --> 00:00:07,980
Hay dos formas una por el lado cliente a través de Angular, con el API, el editor de Angular.

3
00:00:08,040 --> 00:00:09,610
Otra forma es en el Piquet.

4
00:00:09,630 --> 00:00:14,730
Validamos en el Wacken y retornamos todos los mensajes de error al cliente en Angular y mostramos los

5
00:00:14,730 --> 00:00:15,030
mensajes.

6
00:00:15,060 --> 00:00:17,610
Vamos a comenzar primero con la forma de Angular.

7
00:00:17,760 --> 00:00:22,380
Nos vamos a ir a la plantilla del formulario en clientes y form.

8
00:00:22,410 --> 00:00:23,130
Component.

9
00:00:23,310 --> 00:00:23,860
HTML.

10
00:00:23,970 --> 00:00:25,530
En realidad es bastante sencillo.

11
00:00:25,620 --> 00:00:31,770
Por cada input tenemos que agregar cuáles son nuestros valedores a través de atributos.

12
00:00:31,800 --> 00:00:37,920
Por ejemplo, tenemos el validador recayera para indicar que requerido el validador min y max length

13
00:00:37,950 --> 00:00:43,980
para determinar cuál es el largo, mínimo o máximo en caracteres o algún tipo de patrón con expresión

14
00:00:43,980 --> 00:00:44,520
regular.

15
00:00:44,610 --> 00:00:47,180
En fin, hay diferentes baleados también para validar email.

16
00:00:47,280 --> 00:00:55,860
Vamos a partir con recayÃ, simplemente se agrega y vamos a repetir lo mismo para el apellido y también

17
00:00:55,860 --> 00:00:56,760
para L.M.

18
00:00:56,820 --> 00:01:02,190
Pero además de requerido, el nombre va a tener como mínimo 4 caracteres de largo.

19
00:01:02,280 --> 00:01:07,590
Entonces para eso utilizamos el validador min length igual 4.

20
00:01:08,040 --> 00:01:12,360
El tema que ahora tenemos que mostrar los mensajes de error que por ejemplo cada vez que escribimos

21
00:01:12,420 --> 00:01:14,880
estamos escribiendo y no cumple con el validador.

22
00:01:14,910 --> 00:01:20,970
Si tiene 3 caracteres y no 4, debería mostrar el mensaje de error justo debajo de limp o si dejamos

23
00:01:21,000 --> 00:01:24,150
la casilla vacía sin ningún texto, sin ningún valor.

24
00:01:24,210 --> 00:01:28,950
Bueno, para poder mostrar mostrarlo mensaje de error, tenemos que utilizar el endif a través de un

25
00:01:28,950 --> 00:01:30,780
elemento, un TIFF, un contenedor.

26
00:01:30,840 --> 00:01:33,150
No le mostramos los textos con algún estilo.

27
00:01:33,210 --> 00:01:33,810
debutarÃ.

28
00:01:33,900 --> 00:01:34,330
Alert.

29
00:01:34,350 --> 00:01:37,710
Por ejemplo, alert danger, que se refiere a mensaje de error.

30
00:01:38,370 --> 00:01:41,400
Vamos a partir con un contenedor con un div y anidado.

31
00:01:41,460 --> 00:01:42,690
Vamos a tener otro div.

32
00:01:42,900 --> 00:01:46,110
Este es el principal que va a preguntar si existen errores.

33
00:01:46,140 --> 00:01:52,920
Si el campo name, por ejemplo, tiene algún tipo de error y luego vamos a tener un contenedor un div

34
00:01:52,950 --> 00:01:55,560
por cada validador para que muestre el mensaje.

35
00:01:55,620 --> 00:02:02,100
Por ejemplo, recoger el campo requerido o Milenka, el nombre tiene que tener mínimo 4 caracteres.

36
00:02:02,160 --> 00:02:02,940
Cuántos valedores?

37
00:02:02,970 --> 00:02:04,530
Partamos primero por el principal.

38
00:02:05,730 --> 00:02:11,600
Acá vamos a tener el estilo el alert alert danger bien.

39
00:02:11,700 --> 00:02:14,880
Y acá con un gif preguntamos.

40
00:02:14,910 --> 00:02:19,890
Pero para poder preguntar tenemos que tener el objeto que contenga los mensajes de error.

41
00:02:19,950 --> 00:02:22,650
El objeto que está relacionado al nombre.

42
00:02:22,800 --> 00:02:27,870
Para eso tenemos que asignar a una variable local que vamos a llamar, por ejemplo, nombre.

43
00:02:28,350 --> 00:02:32,910
Podemos utilizar el mismo nombre que el campo y usamos gatos para definir esta variable.

44
00:02:33,390 --> 00:02:37,560
Y acá a esta variable le vamos a asignar el objeto ng model.

45
00:02:39,090 --> 00:02:41,850
Entonces este objeto es el que contiene los mensajes de error.

46
00:02:41,910 --> 00:02:45,840
Entonces ahora hacemos referencia a esta variable a nombre acá.

47
00:02:46,080 --> 00:02:53,340
Entonces nombres punto invalid para preguntar si es invalid y tiene que mostrar el mensaje error en

48
00:02:53,340 --> 00:02:53,460
2.

49
00:02:53,460 --> 00:02:54,450
Contexto 1.

50
00:02:54,510 --> 00:02:59,850
Si estamos escribiendo y a medida que vayamos escribiendo es inválido, o bien si ya escribimos el valor

51
00:02:59,910 --> 00:03:01,680
en el input y nos salimos del foco.

52
00:03:01,770 --> 00:03:03,880
Es decir, hacemos un clic fuera del input.

53
00:03:03,990 --> 00:03:06,180
Ahí también debería mostrar el mensaje.

54
00:03:06,330 --> 00:03:13,200
Entonces por eso vamos a agregar nombre Dirty o con doble point nombre touche.

55
00:03:16,080 --> 00:03:17,790
Como decía Dirty.

56
00:03:17,910 --> 00:03:22,110
A medida que uno escribiendo va mostrando mensaje, error y touche, nuestro mensaje error.

57
00:03:22,140 --> 00:03:27,810
Cuando nos salimos del foco del input, continuemos, vamos al div y acá vamos a mostrar el mensaje

58
00:03:27,810 --> 00:03:28,200
de error.

59
00:03:28,290 --> 00:03:29,660
Solamente para el recuadro.

60
00:03:29,790 --> 00:03:32,460
Entonces en este div en if

61
00:03:35,460 --> 00:03:38,790
nombre punto errors, el atributo erros recayÃ.

62
00:03:39,120 --> 00:03:47,100
Acá mostramos el texto cuando falla el requirià nombre es requerido o por qué cosa?

63
00:03:48,090 --> 00:03:50,490
Vamos a copiar y vamos a pegar acá.

64
00:03:51,240 --> 00:03:53,600
Y lo mismo para el Milenka.

65
00:03:54,120 --> 00:03:55,650
Entonces acá el nombre

66
00:03:58,770 --> 00:04:01,410
debe tener al menos 4 caracteres.

67
00:04:02,370 --> 00:04:02,940
Perfecto.

68
00:04:03,060 --> 00:04:06,230
Ahí estamos mostrando los mensajes para ambos baleados.

69
00:04:06,360 --> 00:04:09,090
Y esto mismo tenemos que replicar también para cada campo.

70
00:04:09,180 --> 00:04:15,360
Cada campo va a tener su validador, su propio mensaje customizado y básicamente todo se replica.

71
00:04:15,420 --> 00:04:18,060
Es muy parecido en apellido, en email.

72
00:04:18,160 --> 00:04:24,360
En fin, vamos a tener entonces acá el gato, el apellido Aichi Model.

73
00:04:24,540 --> 00:04:25,840
Vamos a copiar el div.

74
00:04:26,700 --> 00:04:32,430
Lo vamos a dejar justamente abajo, pero solamente vamos a dejar requeria.

75
00:04:33,180 --> 00:04:34,230
Pero en vez de nombre.

76
00:04:34,560 --> 00:04:36,000
Acá sería apellido.

77
00:04:36,090 --> 00:04:36,900
Y acá también.

78
00:04:36,960 --> 00:04:37,680
Acá también.

79
00:04:37,830 --> 00:04:38,310
Acá también.

80
00:04:41,550 --> 00:04:44,750
Y cambiamos también todo con Happy, vámonos.

81
00:04:44,800 --> 00:04:50,520
Animais, además de ser requerido, también vamos a validar que sea un email con formato correcto.

82
00:04:50,640 --> 00:04:57,360
Y por supuesto, también tenemos que asignar el objeto en model a nuestra variable email o el nombre

83
00:04:57,360 --> 00:04:58,080
que queremos colocar.

84
00:05:01,850 --> 00:05:05,750
Bien, copiamos y pegamos a Cacería y.

85
00:05:07,610 --> 00:05:13,800
Y acá también email a apellido Abacería sería apellido, acá sería email.

86
00:05:15,170 --> 00:05:19,850
Vamos a copiar y vamos a tener también el mensaje de error para el correo.

87
00:05:20,240 --> 00:05:28,130
Cuando el correo tiene un formato inválido, la cacería y mail errors en vez de recoger email acá debe

88
00:05:28,130 --> 00:05:33,470
tener un formato válido y guardamos.

89
00:05:33,830 --> 00:05:38,870
Vamos a levantar nuestro proyecto tanto el Wacken como el proyecto con Angular y ya lo tengo lantado,

90
00:05:38,870 --> 00:05:41,720
así que simplemente con clic derecho lo levanta como siempre.

91
00:05:41,840 --> 00:05:46,850
Una vez que violentar servidor, volvemos acá y levantamos nuestra aplicación angular.

92
00:05:54,290 --> 00:05:57,440
Hacemos clic en Crear cliente para ir al formulario.

93
00:05:57,530 --> 00:06:03,080
Si hacemos un clic y escribimos, por ejemplo, los caracteres automáticamente como estamos escribiendo,

94
00:06:03,170 --> 00:06:06,180
acá se aplica el dirty que estamos editando.

95
00:06:06,200 --> 00:06:12,260
Escribiendo sobre el campo iba mostrando el mensaje error del bateador con dogmas desaparece.

96
00:06:12,350 --> 00:06:12,800
Perfecto.

97
00:06:12,920 --> 00:06:17,120
Ahora, qué pasa si borramos a aparece el nombre requerido?

98
00:06:17,270 --> 00:06:20,780
Si hacemos clic o nos salimos del foco del input, hacemos clic.

99
00:06:20,810 --> 00:06:26,090
Por ejemplo, en apellido se mantiene, es requerido y acá aplica el el touch.

100
00:06:26,210 --> 00:06:27,950
Es que nos salimos de foco del input.

101
00:06:28,040 --> 00:06:32,840
El campo es inválido, por lo tanto muestra el mensaje de error y pasaría lo mismo con apellido.

102
00:06:33,200 --> 00:06:35,480
Si nos salimos de foco, hacemos clic en otra parte.

103
00:06:35,570 --> 00:06:41,180
Muestra también que requirió Fulano a esta perfecto zuliano.

104
00:06:41,240 --> 00:06:41,930
Está perfecto.

105
00:06:42,020 --> 00:06:44,600
Vamos a escribir por ejemplo Hola!

106
00:06:44,720 --> 00:06:49,970
Y de tener un formato Alioth perfecto, está funcionando bien, ya está saliendo por el correo.

107
00:06:50,090 --> 00:06:53,900
El único problema es que si dejamos todo ha sido con los mensajes de error.

108
00:06:53,990 --> 00:06:56,930
Igual podemos crear y hacer un clic en el botón.

109
00:06:57,050 --> 00:07:00,860
Entonces la idea ahora como siguiente paso es deshabilitar el botón.

110
00:07:00,980 --> 00:07:07,250
Lo dejamos en Disable mientras el formulario sea inválido y cuando esté todo correcto, estén todos

111
00:07:07,250 --> 00:07:09,050
los campos bien validados.

112
00:07:09,140 --> 00:07:10,310
Lo activamos.

113
00:07:10,460 --> 00:07:11,090
Vamos a ello.

114
00:07:11,180 --> 00:07:11,390
Bien.

115
00:07:11,480 --> 00:07:13,040
En realidad es bastante simple.

116
00:07:13,070 --> 00:07:19,190
Solamente tenemos que asignar en form también una variable global de nuestra vista formulario con el

117
00:07:19,190 --> 00:07:20,720
objeto en txi form.

118
00:07:20,750 --> 00:07:26,330
Con este objeto podemos saber si el formulario es válido o no. Entonces también usando Gatto le damos

119
00:07:26,330 --> 00:07:30,150
el nombre que creamos, por ejemplo cliente form.

120
00:07:30,500 --> 00:07:34,450
Y acá en Chile Form en vez de en yí model es en Gifford.

121
00:07:35,300 --> 00:07:37,430
Bien, bajamos a los input.

122
00:07:37,550 --> 00:07:42,560
Acá tenemos dos botones, así que tenemos que hacerlo en los dos y en el input y en los botones.

123
00:07:42,620 --> 00:07:45,440
En los button tanto para crear como para actualizar.

124
00:07:45,500 --> 00:07:53,240
Tenemos que agregar la directiva disable utilizando los corchetes y ahora tenemos que usar el objeto

125
00:07:53,420 --> 00:07:54,750
que tenemos definido más arriba.

126
00:07:54,830 --> 00:07:57,650
El cliente form justamente para validar.

127
00:07:57,740 --> 00:08:00,890
Entonces si es válido, tenemos que tener el botón habilitado.

128
00:08:00,950 --> 00:08:02,810
De lo contrario, lo deshabilitados

129
00:08:05,960 --> 00:08:07,880
a cada retornar true o fols.

130
00:08:07,970 --> 00:08:10,590
Y dependiendo eso lo va a deshabilitar.

131
00:08:10,610 --> 00:08:13,910
Por ejemplo, si es válido y la negación de válido es fols.

132
00:08:14,000 --> 00:08:15,830
Entonces va a estar habilitado.

133
00:08:15,860 --> 00:08:16,950
Pero si es false.

134
00:08:17,000 --> 00:08:18,440
Por lo tanto es inválido.

135
00:08:18,530 --> 00:08:20,180
La negación de effort es true.

136
00:08:20,330 --> 00:08:23,620
Entonces disable igual true queda deshabilitado.

137
00:08:23,740 --> 00:08:30,410
Bien, y esto mismo tenemos que copiar en el otro button en el arte y con esto guardamos bien.

138
00:08:30,500 --> 00:08:31,430
Ahora vamos a probar.

139
00:08:31,640 --> 00:08:35,450
Si se fijan de forma automática, está completamente deshabilitado.

140
00:08:35,570 --> 00:08:36,500
No se puede enviar.

141
00:08:36,590 --> 00:08:41,750
Entonces, hasta que no esté completamente válido el formulario, no vamos a poder enviar ningún dato

142
00:08:41,810 --> 00:08:43,710
al servidor y eso es lo correcto.

143
00:08:44,250 --> 00:08:46,910
Ah, no me sirve tener 4 caracteres.

144
00:08:47,500 --> 00:08:48,650
Ahí tiene 3.

145
00:08:49,590 --> 00:08:53,820
Perfecto el apellido, solamente que sea requerido.

146
00:08:53,910 --> 00:08:59,130
Por lo tanto, si lo omitimos, si se fijan, si nos salimos del foco del input, hacemos un click en

147
00:08:59,130 --> 00:09:01,710
otro campo, en otra parte aparece el mensaje.

148
00:09:01,830 --> 00:09:06,060
No podemos hacer nada hasta que tengamos un valor igual al correo.

149
00:09:07,140 --> 00:09:13,320
El email debe tener un formato válido, incluso si omitimos la extensión.

150
00:09:13,380 --> 00:09:14,940
También es un correo válido.

151
00:09:15,000 --> 00:09:20,250
Por qué muchas corporaciones que utilizan correo interno de la empresa sin extensiones que se tienen

152
00:09:20,250 --> 00:09:22,170
que detectar y validar como correctos?

153
00:09:24,800 --> 00:09:25,430
Perfecto.

154
00:09:25,830 --> 00:09:31,280
Y para que tengan más detalles sobre los validador que existen en Angular, se pueden ir a buscar,

155
00:09:31,310 --> 00:09:40,610
por ejemplo validad itor y todo lo que aparecen en Nappy, todo nombre de clase que contenga como sufijo

156
00:09:40,700 --> 00:09:43,640
validad validador, por ejemplo recayà validad itor.

157
00:09:44,090 --> 00:09:47,540
Después tenemos y mail validad itor otro valedor.

158
00:09:47,630 --> 00:09:49,580
También tenemos max lecc.

159
00:09:49,670 --> 00:09:53,570
Validad itor mint laing validad itor pattern validad itor.

160
00:09:53,630 --> 00:09:56,840
Hoy podríamos utilizar el patrón validad itor para expresiones regulares.

161
00:09:56,930 --> 00:10:03,140
Si queremos customizar nuestra propia validación, están todas de color como fucsia y con dé, lo que

162
00:10:03,140 --> 00:10:05,050
significa que son directiva.

163
00:10:05,120 --> 00:10:06,650
Son todas directivas.

164
00:10:06,680 --> 00:10:10,790
Por lo tanto se pueden incluir como un atributo, como una directiva en el campo.

165
00:10:11,270 --> 00:10:12,710
Y con esto terminamos.

166
00:10:12,800 --> 00:10:14,000
Hemos llegado a su fin.

167
00:10:14,300 --> 00:10:16,820
Cualquier duda que tengas publica en el foro.

168
00:10:16,910 --> 00:10:17,570
Nos vemos.