Acabamos de terminar de aprender sobre formularios basados en plantillas angulares y también,
en el ejercicio, construyó nuestra primera forma basada en plantillas.
Ahora, cuando el usuario escribe información en los campos de formulario,
podemos desear validar los datos que el usuario escribe en esos campos de datos.
En los primeros días de la web,
la única forma de verificar los datos era enviar los datos
al servidor y luego hacer las comprobaciones en el lado del servidor,
y luego obtener el resultado del lado del servidor.
Pero en estos días, con potentes marcos del lado del cliente como Angular,
una gran cantidad de la validación de datos se puede llevar a cabo fácilmente en el lado del cliente
en sí mismo y podemos detectar fácilmente muchos de los errores en el lado del cliente,
e incluso proporcionar una indicación al usuario sobre los errores.
Ahora, aquí es donde veremos el soporte angular para la validación de formularios
y luego cómo podemos llevar a cabo la validación de formularios,
y luego mostrar mensajes de error al usuario en las vistas.
HTML5 ya viene con algún soporte incorporado para la validación de formularios.
Pero cuando estamos usando Angular para nuestra aplicación,
tenemos que desactivar primero la validación del formulario HTML5,
para que la responsabilidad de hacer la validación del formulario
se transfiera a la aplicación Angular.
Entonces, para hacer eso para el formulario,
como hemos visto en el ejercicio anterior,
incluimos el atributo novalidate a la etiqueta de formulario allí,
para que esto asegure que el angular
se haga cargo de la responsabilidad de hacer la validación de formulario.
¿Cómo nos ayuda Angular a hacer la validación de formularios?
Eso es lo que vamos a examinar con más detalle a continuación.
Siempre que necesite hacer la validación de formularios en Angular,
especialmente cuando necesite hacer referencia a los campos de formulario dentro de su plantilla,
entonces necesita la ayuda de variables de referencia de plantillas angulares.
¿Cómo especificamos una variable de referencia de plantilla?
La variable de referencia de plantilla se puede especificar para
cualquier elemento asociando una variable de plantilla como esta.
Por ejemplo, en este caso para el formulario,
estamos especificando el formulario de inicio de sesión igual a ngForm.
Del mismo modo, para un campo de entrada, por ejemplo,
dirías que barra diagonal,
o más bien #username es igual a ngModel.
En este caso, el formulario de inicio de sesión y el nombre de usuario son variables de referencia de plantilla.
Estas variables de referencia de plantilla se pueden utilizar en
nuestra plantilla angular para hacer referencia a estos campos.
Entonces, en la propia plantilla,
puede verificar los estados de control para
aquellos campos incluyendo cosas como si el campo es válido,
si está sucio,
o tiene algunos errores.
Aprovecharemos este soporte que Angular proporciona para hacer la validación de formularios.
Como mencioné, aprovecharemos
las variables de referencia de la plantilla para recopilar el estado de control para verificar la información.
Entonces, por ejemplo, puedes decir nombre de usuario.prístina dentro de tu plantilla.
Entonces, eso se refiere a verificar el estado,
si el control particular está en estado prístino,
significa que no ha sido tocado y modificado por el usuario hasta ahora.
El sucio es opuesto a prístina,
lo que significa que cuando un campo está sucio,
entonces eso significa que el campo ha sido modificado por el usuario en el pasado.
Del mismo modo, el estado de control válido e inválido
nos permite comprobar si la información dentro de ese campo es válida o no válida,
dependiendo de la especificación de su cheque
para la validez o el estado no válido de ese campo en particular.
Así que, por ejemplo, puede verificar si declaró un campo como requerido,
, lo que significa que esperaba que el usuario
escriba al menos alguna información en el campo.
La ausencia de información dentro del campo en su formulario significa que el campo no es válido.
Del mismo modo, puede especificar la longitud continental o la longitud máxima de un valor de campo,
para que pueda comprobar fácilmente si el número de caracteres
dentro de un campo es aproximadamente la longitud principal,
o por debajo de la longitud máxima, etc.
En el ejercicio que sigue,
aplicaremos estos diversos enfoques de validación de formularios para
nuestra forma basada en plantillas que hemos diseñado en el ejercicio anterior.
Como ejemplo, en su formulario,
puede deshabilitar el botón Enviar marcando a
ver si ese formulario está en el estado válido o no.
Así que en este caso, asociará el
deshabilitado y lo establecerá igual al formulario de inicio de sesión.form.invalid,
significa que cuando el formulario no sea válido,
este botón estará deshabilitado en este caso.
Por lo tanto, el usuario no podrá enviar la información a través de este formulario en particular.
Por lo tanto, esta es una forma de asegurar que
entradas incorrectas no serán enviadas por el usuario a través del formulario.
Del mismo modo, para campos específicos,
puede comprobar si el campo se ha llenado o no.
Por lo tanto, si especifica que se requiere un campo en particular
especificando el atributo requerido para el campo de entrada,
entonces puede verificar si hay un error de
el tipo requerido planteado para el elemento de campo particular allí.
Entonces, en su código, por ejemplo,
incluso puede especificar para informar al usuario sobre
el hecho de que un campo en particular es incorrecto.
Usted usa el error de la estera para significar eso.
Así, la etiqueta de error de mate-, que viene de,
de nuevo, el soporte de forma de material angular como se ve aquí,
si el nGIF resulta ser verdadero,
entonces ese mensaje se mostrará debajo en el campo de entrada allí,
y similar al campo de entrada,
se marcará como rojo en la pantalla.
Por lo tanto, esto es algo que vas a estar comprobando y
asegurando y también entregando mensajes de error al usuario.
En el ejercicio que sigue,
aplicaremos este enfoque para verificar el nombre de usuario y la contraseña.
Vamos a especificar que estos campos son obligatorios y si el usuario hace
no escribe ninguna información en estos campos después de que el campo ha sido tocado,
entonces nos aseguraremos de que el mensaje de error apropiado se muestre al usuario.
Así que, con esta rápida comprensión de la validación de formularios en Angular,
pasemos al ejercicio,
donde veremos cómo podemos hacer una simple validación de formularios para
nuestro formulario de inicio de sesión y luego ser capaces de mostrar mensajes de error.
Volveremos de nuevo a la validación de forma en uno de los ejercicios posteriores,
después de que hayamos aprendido más sobre el soporte reactivo en Angular.