1
00:00:04,070 --> 00:00:10,290
Acabamos de terminar de aprender sobre formularios basados en plantillas angulares y también,

2
00:00:10,290 --> 00:00:14,300
en el ejercicio, construyó nuestra primera forma basada en plantillas.

3
00:00:14,300 --> 00:00:18,210
Ahora, cuando el usuario escribe información en los campos de formulario,

4
00:00:18,210 --> 00:00:23,655
podemos desear validar los datos que el usuario escribe en esos campos de datos.

5
00:00:23,655 --> 00:00:25,630
En los primeros días de la web,

6
00:00:25,630 --> 00:00:28,950
la única forma de verificar los datos era enviar los datos

7
00:00:28,950 --> 00:00:32,580
al servidor y luego hacer las comprobaciones en el lado del servidor,

8
00:00:32,580 --> 00:00:37,155
y luego obtener el resultado del lado del servidor.

9
00:00:37,155 --> 00:00:41,935
Pero en estos días, con potentes marcos del lado del cliente como Angular,

10
00:00:41,935 --> 00:00:46,580
una gran cantidad de la validación de datos se puede llevar a cabo fácilmente en el lado del cliente

11
00:00:46,580 --> 00:00:52,070
en sí mismo y podemos detectar fácilmente muchos de los errores en el lado del cliente,

12
00:00:52,070 --> 00:00:56,885
e incluso proporcionar una indicación al usuario sobre los errores.

13
00:00:56,885 --> 00:01:00,170
Ahora, aquí es donde veremos el soporte angular para la validación de formularios

14
00:01:00,170 --> 00:01:03,725
y luego cómo podemos llevar a cabo la validación de formularios,

15
00:01:03,725 --> 00:01:11,170
y luego mostrar mensajes de error al usuario en las vistas.

16
00:01:11,260 --> 00:01:17,455
HTML5 ya viene con algún soporte incorporado para la validación de formularios.

17
00:01:17,455 --> 00:01:20,750
Pero cuando estamos usando Angular para nuestra aplicación,

18
00:01:20,750 --> 00:01:23,840
tenemos que desactivar primero la validación del formulario HTML5,

19
00:01:23,840 --> 00:01:25,640
para que la responsabilidad de hacer la validación del formulario

20
00:01:25,640 --> 00:01:29,750
se transfiera a la aplicación Angular.

21
00:01:29,750 --> 00:01:32,240
Entonces, para hacer eso para el formulario,

22
00:01:32,240 --> 00:01:34,525
como hemos visto en el ejercicio anterior,

23
00:01:34,525 --> 00:01:40,760
incluimos el atributo novalidate a la etiqueta de formulario allí,

24
00:01:40,760 --> 00:01:43,910
para que esto asegure que el angular

25
00:01:43,910 --> 00:01:47,585
se haga cargo de la responsabilidad de hacer la validación de formulario.

26
00:01:47,585 --> 00:01:50,645
¿Cómo nos ayuda Angular a hacer la validación de formularios?

27
00:01:50,645 --> 00:01:55,324
Eso es lo que vamos a examinar con más detalle a continuación.

28
00:01:55,324 --> 00:01:59,600
Siempre que necesite hacer la validación de formularios en Angular,

29
00:01:59,600 --> 00:02:05,570
especialmente cuando necesite hacer referencia a los campos de formulario dentro de su plantilla,

30
00:02:05,570 --> 00:02:09,960
entonces necesita la ayuda de variables de referencia de plantillas angulares.

31
00:02:09,960 --> 00:02:12,725
¿Cómo especificamos una variable de referencia de plantilla?

32
00:02:12,725 --> 00:02:15,485
La variable de referencia de plantilla se puede especificar para

33
00:02:15,485 --> 00:02:19,235
cualquier elemento asociando una variable de plantilla como esta.

34
00:02:19,235 --> 00:02:22,880
Por ejemplo, en este caso para el formulario,

35
00:02:22,880 --> 00:02:29,760
estamos especificando el formulario de inicio de sesión igual a ngForm.

36
00:02:29,760 --> 00:02:33,160
Del mismo modo, para un campo de entrada, por ejemplo,

37
00:02:33,160 --> 00:02:35,050
dirías que barra diagonal,

38
00:02:35,050 --> 00:02:39,725
o más bien #username es igual a ngModel.

39
00:02:39,725 --> 00:02:46,130
En este caso, el formulario de inicio de sesión y el nombre de usuario son variables de referencia de plantilla.

40
00:02:46,130 --> 00:02:49,370
Estas variables de referencia de plantilla se pueden utilizar en

41
00:02:49,370 --> 00:02:53,800
nuestra plantilla angular para hacer referencia a estos campos.

42
00:02:53,800 --> 00:02:56,245
Entonces, en la propia plantilla,

43
00:02:56,245 --> 00:02:59,060
puede verificar los estados de control para

44
00:02:59,060 --> 00:03:03,289
aquellos campos incluyendo cosas como si el campo es válido,

45
00:03:03,289 --> 00:03:04,760
si está sucio,

46
00:03:04,760 --> 00:03:06,430
o tiene algunos errores.

47
00:03:06,430 --> 00:03:12,865
Aprovecharemos este soporte que Angular proporciona para hacer la validación de formularios.

48
00:03:12,865 --> 00:03:15,964
Como mencioné, aprovecharemos

49
00:03:15,964 --> 00:03:21,870
las variables de referencia de la plantilla para recopilar el estado de control para verificar la información.

50
00:03:21,870 --> 00:03:27,370
Entonces, por ejemplo, puedes decir nombre de usuario.prístina dentro de tu plantilla.

51
00:03:27,370 --> 00:03:30,440
Entonces, eso se refiere a verificar el estado,

52
00:03:30,440 --> 00:03:33,960
si el control particular está en estado prístino,

53
00:03:33,960 --> 00:03:39,080
significa que no ha sido tocado y modificado por el usuario hasta ahora.

54
00:03:39,080 --> 00:03:41,840
El sucio es opuesto a prístina,

55
00:03:41,840 --> 00:03:45,050
lo que significa que cuando un campo está sucio,

56
00:03:45,050 --> 00:03:49,105
entonces eso significa que el campo ha sido modificado por el usuario en el pasado.

57
00:03:49,105 --> 00:03:53,090
Del mismo modo, el estado de control válido e inválido

58
00:03:53,090 --> 00:03:58,295
nos permite comprobar si la información dentro de ese campo es válida o no válida,

59
00:03:58,295 --> 00:04:02,360
dependiendo de la especificación de su cheque

60
00:04:02,360 --> 00:04:06,530
para la validez o el estado no válido de ese campo en particular.

61
00:04:06,530 --> 00:04:11,990
Así que, por ejemplo, puede verificar si declaró un campo como requerido,

62
00:04:11,990 --> 00:04:14,930
, lo que significa que esperaba que el usuario

63
00:04:14,930 --> 00:04:18,790
escriba al menos alguna información en el campo.

64
00:04:18,790 --> 00:04:24,280
La ausencia de información dentro del campo en su formulario significa que el campo no es válido.

65
00:04:24,280 --> 00:04:28,670
Del mismo modo, puede especificar la longitud continental o la longitud máxima de un valor de campo,

66
00:04:28,670 --> 00:04:31,970
para que pueda comprobar fácilmente si el número de caracteres

67
00:04:31,970 --> 00:04:35,500
dentro de un campo es aproximadamente la longitud principal,

68
00:04:35,500 --> 00:04:37,660
o por debajo de la longitud máxima, etc.

69
00:04:37,660 --> 00:04:39,380
En el ejercicio que sigue,

70
00:04:39,380 --> 00:04:42,740
aplicaremos estos diversos enfoques de validación de formularios para

71
00:04:42,740 --> 00:04:47,080
nuestra forma basada en plantillas que hemos diseñado en el ejercicio anterior.

72
00:04:47,080 --> 00:04:51,564
Como ejemplo, en su formulario,

73
00:04:51,564 --> 00:04:54,170
puede deshabilitar el botón Enviar marcando a

74
00:04:54,170 --> 00:04:56,770
ver si ese formulario está en el estado válido o no.

75
00:04:56,770 --> 00:05:00,650
Así que en este caso, asociará el

76
00:05:00,650 --> 00:05:05,875
deshabilitado y lo establecerá igual al formulario de inicio de sesión.form.invalid,

77
00:05:05,875 --> 00:05:07,970
significa que cuando el formulario no sea válido,

78
00:05:07,970 --> 00:05:10,480
este botón estará deshabilitado en este caso.

79
00:05:10,480 --> 00:05:15,910
Por lo tanto, el usuario no podrá enviar la información a través de este formulario en particular.

80
00:05:15,910 --> 00:05:18,995
Por lo tanto, esta es una forma de asegurar que

81
00:05:18,995 --> 00:05:22,700
entradas incorrectas no serán enviadas por el usuario a través del formulario.

82
00:05:22,700 --> 00:05:25,100
Del mismo modo, para campos específicos,

83
00:05:25,100 --> 00:05:30,080
puede comprobar si el campo se ha llenado o no.

84
00:05:30,080 --> 00:05:33,125
Por lo tanto, si especifica que se requiere un campo en particular

85
00:05:33,125 --> 00:05:36,620
especificando el atributo requerido para el campo de entrada,

86
00:05:36,620 --> 00:05:39,320
entonces puede verificar si hay un error de

87
00:05:39,320 --> 00:05:43,250
el tipo requerido planteado para el elemento de campo particular allí.

88
00:05:43,250 --> 00:05:45,020
Entonces, en su código, por ejemplo,

89
00:05:45,020 --> 00:05:47,390
incluso puede especificar para informar al usuario sobre

90
00:05:47,390 --> 00:05:51,035
el hecho de que un campo en particular es incorrecto.

91
00:05:51,035 --> 00:05:56,885
Usted usa el error de la estera para significar eso.

92
00:05:56,885 --> 00:06:01,230
Así, la etiqueta de error de mate-, que viene de,

93
00:06:01,230 --> 00:06:06,555
de nuevo, el soporte de forma de material angular como se ve aquí,

94
00:06:06,555 --> 00:06:09,195
si el nGIF resulta ser verdadero,

95
00:06:09,195 --> 00:06:15,560
entonces ese mensaje se mostrará debajo en el campo de entrada allí,

96
00:06:15,560 --> 00:06:17,100
y similar al campo de entrada,

97
00:06:17,100 --> 00:06:20,405
se marcará como rojo en la pantalla.

98
00:06:20,405 --> 00:06:25,085
Por lo tanto, esto es algo que vas a estar comprobando y

99
00:06:25,085 --> 00:06:30,000
asegurando y también entregando mensajes de error al usuario.

100
00:06:30,000 --> 00:06:31,740
En el ejercicio que sigue,

101
00:06:31,740 --> 00:06:35,980
aplicaremos este enfoque para verificar el nombre de usuario y la contraseña.

102
00:06:35,980 --> 00:06:40,700
Vamos a especificar que estos campos son obligatorios y si el usuario hace

103
00:06:40,700 --> 00:06:45,565
no escribe ninguna información en estos campos después de que el campo ha sido tocado,

104
00:06:45,565 --> 00:06:51,210
entonces nos aseguraremos de que el mensaje de error apropiado se muestre al usuario.

105
00:06:51,210 --> 00:06:57,469
Así que, con esta rápida comprensión de la validación de formularios en Angular,

106
00:06:57,469 --> 00:06:58,970
pasemos al ejercicio,

107
00:06:58,970 --> 00:07:03,410
donde veremos cómo podemos hacer una simple validación de formularios para

108
00:07:03,410 --> 00:07:08,160
nuestro formulario de inicio de sesión y luego ser capaces de mostrar mensajes de error.

109
00:07:08,160 --> 00:07:12,470
Volveremos de nuevo a la validación de forma en uno de los ejercicios posteriores,

110
00:07:12,470 --> 00:07:19,660
después de que hayamos aprendido más sobre el soporte reactivo en Angular.