1 00:00:03,170 --> 00:00:05,820 Ahora que hemos aprendido sobre el soporte de validación de formularios basado en plantillas 2 00:00:05,820 --> 00:00:11,165 en Angular en la conferencia anterior, 3 00:00:11,165 --> 00:00:14,625 vamos a aplicar lo que hemos aprendido a 4 00:00:14,625 --> 00:00:18,330 el formulario de inicio de sesión que hemos diseñado en el ejercicio anterior. 5 00:00:18,330 --> 00:00:21,395 Vamos a hacer la validación de formulario simple para el formulario de inicio de sesión. 6 00:00:21,395 --> 00:00:26,160 En particular, especificaremos el nombre de usuario y la contraseña según sea necesario, 7 00:00:26,160 --> 00:00:32,430 y luego verificaremos para asegurarnos de que el usuario escriba la información en estos campos, 8 00:00:32,430 --> 00:00:37,125 y poder mostrar mensajes de error cuando los campos estén vacíos. 9 00:00:37,125 --> 00:00:46,180 Procedamos con esta modificación a la aplicación en este ejercicio. 10 00:00:46,180 --> 00:00:49,215 Para comenzar con este ejercicio, 11 00:00:49,215 --> 00:00:53,600 vamos al formulario de inicio de sesión aquí, 12 00:00:53,600 --> 00:00:57,090 que tenemos en la plantilla de componentes de inicio de sesión aquí. 13 00:00:57,090 --> 00:01:02,400 Ya hemos añadido en el atributo novalidate al formulario de inicio de sesión. 14 00:01:02,400 --> 00:01:10,780 Por lo tanto, añadamos la variable de plantilla llamada LoginForm a esta plantilla, 15 00:01:10,780 --> 00:01:18,835 y luego establecemos esto en ngForm como entendimos de la conferencia anterior aquí. 16 00:01:18,835 --> 00:01:20,170 Por lo tanto, al hacer esto, 17 00:01:20,170 --> 00:01:26,500 estamos especificando que esta variable de plantilla nos permite rastrear el estado del formulario. 18 00:01:26,500 --> 00:01:31,330 Por lo tanto, incluso podemos comprobar si el estado válido o no válido para este formulario. 19 00:01:31,330 --> 00:01:34,485 Ahora, además, para cada una de estas entradas, 20 00:01:34,485 --> 00:01:43,620 también agregaremos de manera similar las variables de plantilla correspondientes aquí. 21 00:01:43,620 --> 00:01:45,220 Así que, déjame ir a la siguiente línea aquí, 22 00:01:45,220 --> 00:01:52,670 y allí voy a decir nombre de usuario es ngModel. 23 00:01:52,670 --> 00:01:58,360 Entonces, también especificaremos esto según sea necesario aquí. 24 00:01:58,360 --> 00:02:00,660 Del mismo modo, para la contraseña, 25 00:02:00,660 --> 00:02:09,545 añadiremos aquí la variable de plantilla correspondiente como contraseña está en ngModel, 26 00:02:09,545 --> 00:02:15,700 y luego especificaremos esto como se requiera aquí. 27 00:02:15,700 --> 00:02:19,700 Así que, ahora que hemos especificado las variables de plantilla, 28 00:02:19,700 --> 00:02:23,870 podemos llevar a cabo algunas de las comprobaciones de validación de formularios aquí. 29 00:02:23,870 --> 00:02:26,490 Ahora, porque estamos especificando esto como requerido, 30 00:02:26,490 --> 00:02:28,280 significa que si estos campos, 31 00:02:28,280 --> 00:02:30,455 los campos de entrada están vacíos, 32 00:02:30,455 --> 00:02:34,525 entonces el error requerido será marcado para esto. 33 00:02:34,525 --> 00:02:40,105 Del mismo modo, ahora que tenemos la variable de plantilla para el formulario, 34 00:02:40,105 --> 00:02:47,380 podemos usar fácilmente eso para verificar y deshabilitar el botón Enviar abajo abajo aquí. 35 00:02:47,380 --> 00:02:49,255 Entonces, para el botón Enviar, 36 00:02:49,255 --> 00:02:53,270 lo que hacemos aquí es usar 37 00:02:53,270 --> 00:03:01,080 el campo deshabilitado aquí, 38 00:03:01,080 --> 00:03:03,500 y luego estableceremos el campo deshabilitado 39 00:03:03,500 --> 00:03:12,270 en loginform.form.invalid. 40 00:03:12,270 --> 00:03:14,030 Por lo tanto, al hacer esto, 41 00:03:14,030 --> 00:03:18,030 desactivaremos este botón cuando el formulario no sea válido. 42 00:03:18,030 --> 00:03:23,925 Por lo tanto, el usuario ni siquiera puede enviar el formulario cuando el formulario contiene una entrada no válida. 43 00:03:23,925 --> 00:03:27,355 Así que, por ejemplo, si el nombre de usuario está vacío o la contraseña está vacía, 44 00:03:27,355 --> 00:03:29,520 entonces el formulario de inicio de sesión no será válido, 45 00:03:29,520 --> 00:03:32,290 y por lo tanto el usuario no puede enviar este formulario. 46 00:03:32,290 --> 00:03:36,950 Ahora, esta es una parte de la validación de formularios que podemos hacer, 47 00:03:36,950 --> 00:03:40,385 por la que podemos evitar que se envíe el formulario. 48 00:03:40,385 --> 00:03:43,285 Además, para cada uno de estos campos, 49 00:03:43,285 --> 00:03:47,945 podemos incluso mostrar un mensaje de error para 50 00:03:47,945 --> 00:03:53,875 indicar qué tipo de error está ocurriendo en este campo en particular. 51 00:03:53,875 --> 00:03:55,309 Entonces, para hacer esto, 52 00:03:55,309 --> 00:03:58,230 a cada uno de estos elementos de campo de formulario, 53 00:03:58,230 --> 00:04:07,650 añadiremos en la etiqueta mat-error allí, 54 00:04:07,650 --> 00:04:12,270 y luego diremos stop nGIF, 55 00:04:12,270 --> 00:04:18,345 y diremos username.errors. 56 00:04:18,345 --> 00:04:23,920 Por lo tanto, tenga en cuenta que ya hemos dado a esta plantilla una variable llamada nombre de usuario, 57 00:04:23,920 --> 00:04:28,665 para que podamos usar en username.errors si hay errores y 58 00:04:28,665 --> 00:04:34,930 si se requiere este tipo de error. 59 00:04:34,930 --> 00:04:41,810 Entonces, si el error es un tipo requerido de error que es causa allí, 60 00:04:41,810 --> 00:04:44,060 entonces en ese punto, 61 00:04:44,060 --> 00:04:54,140 podemos especificar que el error correspondiente a ser mostrado es el nombre de usuario es requerido. 62 00:04:54,140 --> 00:04:59,305 Entonces, ese es el error que se mostrará para este campo aquí. 63 00:04:59,305 --> 00:05:03,810 Del mismo modo, permítanme agregar el mismo tipo de cosas para el campo de contraseña aquí. 64 00:05:03,810 --> 00:05:06,610 Entonces, déjame copiar eso y luego pegarlo aquí, 65 00:05:06,610 --> 00:05:09,110 y luego diremos password.errors. 66 00:05:09,110 --> 00:05:17,395 Entonces, el mensaje será contraseña es necesaria. 67 00:05:17,395 --> 00:05:19,070 Por lo tanto, añadiendo esto, 68 00:05:19,070 --> 00:05:22,535 vamos a mostrar mensajes de error abajo 69 00:05:22,535 --> 00:05:27,665 estos campos cuando el campo no contiene ninguna información. 70 00:05:27,665 --> 00:05:29,950 Corrección menor aquí. 71 00:05:29,950 --> 00:05:34,820 Eso debería ser nombre de usuario?errors.required aquí, 72 00:05:34,820 --> 00:05:38,470 y de manera similar, este también debería ser.required aquí. 73 00:05:38,470 --> 00:05:40,375 Entonces, con estas modificaciones, 74 00:05:40,375 --> 00:05:43,280 mi componente de inicio de sesión ahora está listo 75 00:05:43,280 --> 00:05:47,275 para hacer la validación del formulario y luego mostrar mensajes de error. 76 00:05:47,275 --> 00:05:52,505 Por lo tanto, vamos a guardar los cambios y luego ir a echar un vistazo a la aplicación actualizada. 77 00:05:52,505 --> 00:05:55,705 Ir a nuestra aplicación en el navegador, 78 00:05:55,705 --> 00:05:58,475 vamos a abrir el formulario de inicio de sesión aquí. 79 00:05:58,475 --> 00:06:01,720 Por lo tanto, se puede ver que ahora tanto el nombre de usuario como la contraseña llevan 80 00:06:01,720 --> 00:06:05,355 una estrella allí para indicar que ambos son necesarios. 81 00:06:05,355 --> 00:06:07,550 Entonces, déjame escribir. 82 00:06:09,870 --> 00:06:16,130 Por lo tanto, aquí, verá que el formulario es válido porque contiene información, 83 00:06:16,130 --> 00:06:20,375 y por lo tanto se habilitará el botón de inicio de sesión. 84 00:06:20,375 --> 00:06:24,840 Permítanme eliminar la información del campo de contraseña, 85 00:06:24,840 --> 00:06:27,950 y luego inmediatamente se dan cuenta de que 86 00:06:27,950 --> 00:06:32,405 el error se indica aquí diciendo que se requiere contraseña. 87 00:06:32,405 --> 00:06:37,040 También tenga en cuenta que el botón Iniciar sesión ya no estará habilitado. 88 00:06:37,040 --> 00:06:40,760 Se desactivará. Por lo tanto, no podrá enviar el formulario aquí. 89 00:06:40,760 --> 00:06:43,960 Pero en el momento en que rellene algo en la contraseña, 90 00:06:43,960 --> 00:06:47,060 entonces el botón de inicio de sesión estará habilitado, 91 00:06:47,060 --> 00:06:49,670 y podremos enviar el formulario aquí. 92 00:06:49,670 --> 00:06:51,390 Del mismo modo para el nombre de usuario. 93 00:06:51,390 --> 00:06:55,045 Si elimino la información de nombre de usuario allí, 94 00:06:55,045 --> 00:06:58,115 verá el error que se muestra aquí, 95 00:06:58,115 --> 00:07:04,670 y también verá que el botón de inicio de sesión no está habilitado en este punto. 96 00:07:04,670 --> 00:07:10,270 Entonces, así es como se puede llevar a cabo la validación del formulario en este caso. 97 00:07:10,270 --> 00:07:12,170 Así que, como has visto, 98 00:07:12,170 --> 00:07:15,960 añadiendo en forma simple validación a nuestra aplicación, 99 00:07:15,960 --> 00:07:18,515 podemos comprobar para asegurarnos de que 100 00:07:18,515 --> 00:07:22,925 los campos contienen la información que se supone que contienen, 101 00:07:22,925 --> 00:07:24,725 y en el formato correcto. 102 00:07:24,725 --> 00:07:30,290 Examinaremos un poco más de la validación de la forma en uno de los ejercicios posteriores, 103 00:07:30,290 --> 00:07:33,020 especialmente para las formas reactivas. 104 00:07:33,020 --> 00:07:35,945 Con esto, completamos este ejercicio. 105 00:07:35,945 --> 00:07:38,840 Este es un buen momento para que hagas un git commit 106 00:07:38,840 --> 00:07:43,080 con los formularios basados en plantillas de mensajes, parte dos.