Ahora que hemos aprendido sobre el soporte de validación de formularios basado en plantillas
en Angular en la conferencia anterior,
vamos a aplicar lo que hemos aprendido a
el formulario de inicio de sesión que hemos diseñado en el ejercicio anterior.
Vamos a hacer la validación de formulario simple para el formulario de inicio de sesión.
En particular, especificaremos el nombre de usuario y la contraseña según sea necesario,
y luego verificaremos para asegurarnos de que el usuario escriba la información en estos campos,
y poder mostrar mensajes de error cuando los campos estén vacíos.
Procedamos con esta modificación a la aplicación en este ejercicio.
Para comenzar con este ejercicio,
vamos al formulario de inicio de sesión aquí,
que tenemos en la plantilla de componentes de inicio de sesión aquí.
Ya hemos añadido en el atributo novalidate al formulario de inicio de sesión.
Por lo tanto, añadamos la variable de plantilla llamada LoginForm a esta plantilla,
y luego establecemos esto en ngForm como entendimos de la conferencia anterior aquí.
Por lo tanto, al hacer esto,
estamos especificando que esta variable de plantilla nos permite rastrear el estado del formulario.
Por lo tanto, incluso podemos comprobar si el estado válido o no válido para este formulario.
Ahora, además, para cada una de estas entradas,
también agregaremos de manera similar las variables de plantilla correspondientes aquí.
Así que, déjame ir a la siguiente línea aquí,
y allí voy a decir nombre de usuario es ngModel.
Entonces, también especificaremos esto según sea necesario aquí.
Del mismo modo, para la contraseña,
añadiremos aquí la variable de plantilla correspondiente como contraseña está en ngModel,
y luego especificaremos esto como se requiera aquí.
Así que, ahora que hemos especificado las variables de plantilla,
podemos llevar a cabo algunas de las comprobaciones de validación de formularios aquí.
Ahora, porque estamos especificando esto como requerido,
significa que si estos campos,
los campos de entrada están vacíos,
entonces el error requerido será marcado para esto.
Del mismo modo, ahora que tenemos la variable de plantilla para el formulario,
podemos usar fácilmente eso para verificar y deshabilitar el botón Enviar abajo abajo aquí.
Entonces, para el botón Enviar,
lo que hacemos aquí es usar
el campo deshabilitado aquí,
y luego estableceremos el campo deshabilitado
en loginform.form.invalid.
Por lo tanto, al hacer esto,
desactivaremos este botón cuando el formulario no sea válido.
Por lo tanto, el usuario ni siquiera puede enviar el formulario cuando el formulario contiene una entrada no válida.
Así que, por ejemplo, si el nombre de usuario está vacío o la contraseña está vacía,
entonces el formulario de inicio de sesión no será válido,
y por lo tanto el usuario no puede enviar este formulario.
Ahora, esta es una parte de la validación de formularios que podemos hacer,
por la que podemos evitar que se envíe el formulario.
Además, para cada uno de estos campos,
podemos incluso mostrar un mensaje de error para
indicar qué tipo de error está ocurriendo en este campo en particular.
Entonces, para hacer esto,
a cada uno de estos elementos de campo de formulario,
añadiremos en la etiqueta mat-error allí,
y luego diremos stop nGIF,
y diremos username.errors.
Por lo tanto, tenga en cuenta que ya hemos dado a esta plantilla una variable llamada nombre de usuario,
para que podamos usar en username.errors si hay errores y
si se requiere este tipo de error.
Entonces, si el error es un tipo requerido de error que es causa allí,
entonces en ese punto,
podemos especificar que el error correspondiente a ser mostrado es el nombre de usuario es requerido.
Entonces, ese es el error que se mostrará para este campo aquí.
Del mismo modo, permítanme agregar el mismo tipo de cosas para el campo de contraseña aquí.
Entonces, déjame copiar eso y luego pegarlo aquí,
y luego diremos password.errors.
Entonces, el mensaje será contraseña es necesaria.
Por lo tanto, añadiendo esto,
vamos a mostrar mensajes de error abajo
estos campos cuando el campo no contiene ninguna información.
Corrección menor aquí.
Eso debería ser nombre de usuario?errors.required aquí,
y de manera similar, este también debería ser.required aquí.
Entonces, con estas modificaciones,
mi componente de inicio de sesión ahora está listo
para hacer la validación del formulario y luego mostrar mensajes de error.
Por lo tanto, vamos a guardar los cambios y luego ir a echar un vistazo a la aplicación actualizada.
Ir a nuestra aplicación en el navegador,
vamos a abrir el formulario de inicio de sesión aquí.
Por lo tanto, se puede ver que ahora tanto el nombre de usuario como la contraseña llevan
una estrella allí para indicar que ambos son necesarios.
Entonces, déjame escribir.
Por lo tanto, aquí, verá que el formulario es válido porque contiene información,
y por lo tanto se habilitará el botón de inicio de sesión.
Permítanme eliminar la información del campo de contraseña,
y luego inmediatamente se dan cuenta de que
el error se indica aquí diciendo que se requiere contraseña.
También tenga en cuenta que el botón Iniciar sesión ya no estará habilitado.
Se desactivará. Por lo tanto, no podrá enviar el formulario aquí.
Pero en el momento en que rellene algo en la contraseña,
entonces el botón de inicio de sesión estará habilitado,
y podremos enviar el formulario aquí.
Del mismo modo para el nombre de usuario.
Si elimino la información de nombre de usuario allí,
verá el error que se muestra aquí,
y también verá que el botón de inicio de sesión no está habilitado en este punto.
Entonces, así es como se puede llevar a cabo la validación del formulario en este caso.
Así que, como has visto,
añadiendo en forma simple validación a nuestra aplicación,
podemos comprobar para asegurarnos de que
los campos contienen la información que se supone que contienen,
y en el formato correcto.
Examinaremos un poco más de la validación de la forma en uno de los ejercicios posteriores,
especialmente para las formas reactivas.
Con esto, completamos este ejercicio.
Este es un buen momento para que hagas un git commit
con los formularios basados en plantillas de mensajes, parte dos.