Siguiendo con el ejemplo de la aplicación anterior, vamos a introducir un nuevo campo que tendrá una validación asíncrona.
¿Qué son las validaciones asíncronas?
Las validaciones asíncronas son aquellas en las cuales debemos hacer una solicitud externa y de acuerdo a ello validar los datos, por ejemplo para validar un nombre de usuario (username), primero debemos hacer una solicitud a nuestra base de datos y comprobar que el nombre de usuario está disponible, esto es una validación asíncrona.
Como no tenemos acceso a una base de datos, vamos a simular un acceso creando una función que tarde un tiempo en ejecutarse, para poder probar la validación.
En nuestro proyecto, nos vamos al html y creamos un nuevo campo de texto al que llamaremos "username":
Para visualizar mejor lo que va ocurriendo con el formulario a medida que vamos rellenando los campos, nos vamos al final del formulario e introducimos una etiqueta que nos muestre el estatus del formulario, justo debajo de donde mostramos si el formulario es válido o no:
Ahora sí, nos vamos al typeScript e introducimos el nuevo campo "username" en el formulario:
Como se puede ver, al nuevo campo le hemos añadido el validador de requerido, y en el TERCER parámetro del constructor del FormControl le hemos añadido un validador personalizado "existeUsuario". Como dijimos en una entrada anterior, en el tercer parámetro del constructor de un FormControl es donde se colocan las validaciones asíncronas.
Procedemos a crearnos el validador "existeUsuario":
Como se puede ver, es una función similar a los anteriores validadores personalizados que creamos anteriormente, solo que aquí, en lugar de verdadero o falso, se devuelve una promesa o un observable.
En el interior de la función se puede ver que llamamos a una promesa que tarda 3 segundos en resolverse y que comprueba que el username escrito no sea "strider".
No hay que olvidarse de importar el Observable:
Ahora arrancamos la aplicación y rellenamos todos los campos con valores válidos excepto el nuevo campo username:
Como se puede ver en las etiquetas de abajo, al mostrar si el formulario es válido aparece false, y en el estatus aparece "INVALID".
Si escribimos ahora cualquier texto en ese campo, podemos observar que durante 3 segundos aparece lo siguiente:
El formulario como no válido y el estatus como "PENDING". Esto significa que el formulario aún está siendo validado.
De que pasen esos 3 segundos, aparece lo siguiente:
El formulario como válido y el estatus como "VALID".
Ahora, si escribimos "strider" en el campo "username", volverá a validar durante 3 segundos, pero luego el formulario pasará a no válido en ambas etiquetas:
Y eso es todo.
No hay comentarios:
Publicar un comentario