Validaciones Asíncronas con API para Formularios de Categorías

Clase 24 de 37 • Curso de Angular Forms: Creación y Optimización de Formularios Web

Resumen

¿Cómo realizar validaciones asincrónicas en un formulario?

Las validaciones asincrónicas son clave para ofrecer una experiencia de usuario fluida y optimizada. Imagina estar llenando un formulario largo, llegar al final para guardar la información y ¡sorpresa! aparece un error. Esto puede ser frustrante, ¿verdad? Mediante el uso de validaciones asincrónicas, podemos alertar al usuario de inmediato si el nombre ya está en uso, similar a cuando creas un correo en plataformas como Hotmail. Exploraremos el uso de una API que verifica la disponibilidad de categorías en tiempo real a medida que el usuario ingresa la información.

¿Cómo funciona el endpoint de disponibilidad?

Para realizar la validación asincrónica, utilizaremos un endpoint específico de nuestra API que verifica la disponibilidad de una categoría.

Ruta completa: API categories availability
Método: POST
Funcionalidad: Envía el nombre de la categoría deseada por crear y devuelve un JSON con un valor booleano indicando si está disponible (true) o no (false).

Este es el primer paso para conectar nuestra validación asincrónica con el frontend.

¿Cómo implementar la validación en el servicio?

Primero, debemos implementar un método en nuestro servicio categories service que se conecta al endpoint de disponibilidad. Aquí te mostramos cómo hacerlo:

function checkCategory(name) {
    return this.http.post('categories/availability', { name });
}

Este método envía el nombre de la categoría al endpoint y espera la respuesta de disponibilidad. Podemos especificar en el código que esperamos un booleano como respuesta.

¿Cómo crear la validación en validators?

Dentro de nuestra clase de validaciones personalizadas (validators), redactamos la lógica de la validación asincrónica. Aquí se utiliza el poder de crear funciones dentro de funciones, una práctica común en lenguajes como JavaScript.

import { map } from 'rxjs/operators';

static validateCategory(service) {
    return (control) => {
        const value = control.value;
        return service.checkCategory(value).pipe(
            map(response => response.isAvailable ? null : { notAvailable: true })
        );
    }
}

Este fragmento de código toma el valor del control, verifica su disponibilidad usando el servicio y retorna null si está disponible o un error si no lo está. Es esencial que comprendas el funcionamiento de observables y operators de RxJS para transformar las respuestas adecuadamente.

¿Cómo aplicar la validación al formulario?

Una vez configurada nuestra validación, es momento de integrarla con el formulario de categorías:

this.categoryForm = this.formBuilder.group({
    name: [
        '',
        [Validators.required, Validators.minLength(4)],
        [Validators.validateCategory(this.categoryService)]
    ]
});

Incluimos nuestras validaciones sincronas primero (Validators.required y Validators.minLength), seguidas de nuestra validación asincrónica personalizada.

¿Cómo se visualizan los errores en el formulario?

Para mejorar la experiencia del usuario, mostramos mensajes de error junto al campo correspondiente si hay algún problema con la validación.

<div *ngIf="form.errors?.notAvailable">
    Este nombre ya lo tiene otra categoría.
</div>

Estos mensajes proporcionan un feedback claro e inmediato al usuario, ayudándoles a corregir errores antes de seguir completando el formulario.

Esperamos que este enfoque para implementar validaciones asincrónicas te sea útil para mejorar tus desarrollos. A medida que vayas adquiriendo práctica, estas técnicas se volverán parte de tu arsenal de herramientas para desarrollar interfaces dinámicas y responsivas. ¡Sigue aprendiendo y éxitos en tus proyectos!

Christian Bartrina

student•

En caso que tengan que usar el tipo "any", les recomiendo usar "unknown" en su lugar. De esta forma typescript entiende que nunca va a ser un valor "undefined" o "null".

Bernarda Albanesi

student•

NO funciona la api

Ricardo Betancourt

student•

Lo que me gustaria para un futuro curso es ver mas sobre RXJS los operadores map, pipe find, reduce. O existe ya un curso de este tema ???

Nicolas Molina

teacher•

Aún no exsite pero si lo tenemos el mira así que pronto estaá disponible.

Alejandro Valenzuela

student•

Buenas, consulta la validación asincronica que implementamos en este vídeo, se ejecuta cada vez que tipiamos en el input se hace una petición al api, ahora para una mejor performance esto se puede hacer o implementar una vez que el input pierda el focu?

Humberto Guzman

student•

Para los que estén usando la nueva API https://api.escuelajs.co/api/v1:

No existe el endpoint '/categories/availability'

Pero aun así puedes realizar el ejercicio de la siguiente manera:

CategoryService:

// Agreguen el import de map de rxjs/operators
import { map } from 'rxjs/operators';

checkAvailability(name: Category['name']) {
    return this.getAll().pipe(
      map((categories) => {
        const isAvailable = !categories.some((category) => category.name === name);
        return isAvailable;
      })
    );
  }
```Validators:
```js
// Agreguen el import de map de rxjs/operators
import { map } from 'rxjs/operators';

static validateCategory(service: CategoriesService) {
    return (control: AbstractControl) => {
      const value = control.value;
      return service.checkAvailability(value).pipe(
        map((response) => {
          const isAvailable = response;
          if (!isAvailable) return { not_available: true };

          return null;
        })
      );
    };
  }

Con esto, ya lo demás debería funcionar sin problemas.

*Nota: Esto <u>NO</u> es una buena práctica, ya que estamos llamando a nuestro endpoint '/categories' cada vez que cambiamos en el input para validar si existe. Lo mejor es que nuestro backend realice esta operación en la base de datos de forma más eficiente. Esto es solo con fines de realizar el ejercicio para los que quieran ver cómo funciona las validaciones asincrónicas en Angular.

Espero le sirva a alguien :)

Juan Andrés Villada López

student•

Muchísimas gracias Humberto

Emilio Nicolás Mendoza Patti

student•

Adjunto evidencia 😅

José Nicolás Aristizabal Ramírez

student•

Hoy 06-01-2022 las consultas a la API arrojan un error en el servidor. Gracias

Nicolas Molina

teacher•

Hola, sentimos los problemas causados y la demora en responder, ya la API está al aire de nuevo.

Christian Guevara

student•

Tengo una consulta ¿por que tenemos que recurrir a un HOF para al momento de crear la validación?

¿por que no se puede hacer directamente?

static validateCategory(service: CategoriesService) {
    return (control: AbstractControl) => {
      const value = control.value;

      return service.checkCategory(value).pipe(
        map((response) => {
          const isAvalaibility = response.isAvailable;
          console.log(isAvalaibility);

          if (!isAvalaibility) {
            return { not_avalable: true };
          }
          return null;
        })
      );
    };
  }

Diego Fernando Caviedes Camaho

student•

que es un HOF

Horus Sinhue Camacho Avila

student•

Si vienes del futuro como yo donde no existe el endpoint donde deben hacerse las peticiones para validar si el nombre existe o no, hagan la petición a el método getAllCategories del archivo de servicios, y el método de los validators debería quedar de la siguiente manera:

 static validateCategory(service: CategoriesService) {
    return (control: AbstractControl) => {
      const value = control.value;
      return service.getAllCategories().pipe(
        map((categories) => {
          const unAvailable = categories.find((category) => category.name === value);
          if (unAvailable === undefined) {
            return null;
          }
          return { not_available: true };
        })
      );
    };
  }

Con eso digamos que el filtrado que se hace en el back lo traemos al front y listo debería funcionar.

Horus Sinhue Camacho Avila

student•

Por cierto, quiero aclarar, que no es la forma correcta para afrontar este tipo de validación asíncrona por que no es muy correcto o más bien nada correcto mandar toda la información del back para validar si existe o no un nombre de un elemento, sin embargo para poder entender la validación asíncrona de los formularios es una forma de parchar que no existe el end point que debería validarlo.

Havel Contreras Tapahuasco

student•

Perfecto!!

Hinojosa Herrera Kevin Luis

student•

El api esta abajo, no responde

Emilio Nicolás Mendoza Patti

student•

Justo este endpoint no existe en la nueva API

lautaro acciarri

student•

a mi tampoco me aparece, me parece que particularmente para este clase no han remodelado la api

Armando Rivera

student•

Pensando en tener un mejor performance a la hora de hacer las peticiones http agregué dos operadores, sin embargo no funcionó :(

debounceTime se supone que no hace la petición hasta después del tiempo indicado.
distinctUntilChanged no debería hacer la petición hasta que lo que escriba el usuario sea distinto en el tiempo dado en dobounceTime

return service.checkCategory(value)
.pipe(
  debounceTime(1000),
  distinctUntilChanged(),
  map((response: Availability) => {
  const isAvailable = response.isAvailable;
  if (!isAvailable) {
    return {not_available: true};
   }
   return null;
  })
);

Santiago Barrios Grijalba

student•

Es que estos debes ponerlos como evento en el input... ahí le haces ese pipe para que no envie la petición..

Si quieres hacerlo ya en la peticion como tal te recomiento exhaustMap

Piero Vasquez

student•

Buscando un poco por internet he encontrado la siguiente solución:

static validateCategory(service: CategoriesService) {
    return (control: AbstractControl) => {
      const value = control.value;
      return timer(500).pipe(
        switchMap(() => {
          return service.checkCategoryName(value)
            .pipe(
              map((response: any) => response.isAvailable ? null : { notAvailable: true })
            );
        })
      );
    };
  }

No sé si es la mejor solución para el problema, pero por lo menos funciona.

Juan Carlos Pinzón

student•

Muy útiles las validaciones asíncronas, sin embargo noté que cada que escribo una letra en el input se hace una petición al api que configuré

Diego Code

student•

ekisdé

Félix Alejandro Zelaya Orellana

student•

Exelente!! Siempre tuve la duda de como hacer este tipo de validaciones

Diego Fernando Caviedes Camaho

student•

Excelente las validaciones asíncronas

Christian Michelle Torres Martínez

student•

De las mejores clases de este curso, que manera de darle poder a un formulario con validaciones asincrónicas

Horacio Castillejo

student•

José Luis García Peceros

student•

consulta si yo tengo un servicio rest, que lo que hace es consulta usuario, pero yo uso para validar si existe el usuario, pero este servicio, su respuesta tiene que llenar algunos datos del formulario. ¿Cual seria la mejor forma de hacerlo?.

Gustavo Restrepo

student•

Podrías formular un poco mejor tu pregunta