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

¿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!