¿Cómo crear validaciones grupales en Angular?

Aprender a manejar validaciones personalizadas en Angular es una habilidad poderosa. Pero, ¿qué sucede cuando necesitas validar dos o más campos en conjunto, en lugar de de manera individual? Las validaciones grupales son útiles para verificar que varios campos sigan la misma lógica o requisitos. Un ejemplo clásico es la validación de que dos contraseñas coincidan en un formulario de registro. En este artículo, vamos a explorar cómo implementar estas validaciones.

¿Qué es una validación grupal?

Una validación grupal implica comprobar el estado o valor de múltiples campos al mismo tiempo. Imagina un formulario con un campo de contraseña y otro de confirmación de contraseña. No basta con validar cada uno por separado; debemos garantizar que ambos coincidan para poder proceder con el registro del usuario.

¿Cómo implementar una validación grupal?

Para implementar una validación grupal en Angular, primero debemos asegurar que el campo de confirmación de contraseña esté correctamente vinculado a nuestro formulario reactivo. A continuación te mostramos cómo hacerlo paso a paso:

fullscreen
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export class MyValidators {
  static matchPasswords(control: AbstractControl): ValidationErrors | null {
    const password = control.get('password')?.value;
    const confirmPassword = control.get('confirmPassword')?.value;
    
    if (password !== confirmPassword) {
      return { matchPasswords: true };
    }
    return null;
  }
}

1. Ligado al formulario: Asegúrate de que el campo confirmPassword esté vinculado correctamente en el HTML utilizando un formControlName.

2. Método estático de validación: Implementa un método estático matchPasswords en una clase de validadores personalizados.

3. Validación con lógica: Dentro del método, toma los valores de ambos campos y verifica si son iguales. Si lo son, retorna null indicando que no hay error; si no, retorna un objeto de error.

¿Cómo mostrar los errores de validación?

Mostremos un mensaje de error si las contraseñas no coinciden. Esto se puede lograr con lógica condicional en el front-end:

fullscreen
<div *ngIf="form.errors?.matchPasswords && confirmPassword.touched">
  <p>Las contraseñas no coinciden.</p>
</div>

Esta sección del código HTML verifica si el formulario en general contiene un error de tipo matchPasswords y si el campo de confirmación está tocado, para así mostrar el mensaje de error.

¿Cuál es el desafío adicional?

Como ejercicio práctico, intenta crear dos campos que validen un rango numérico. Supongamos que quieres que estos inputs estén dentro del rango de cero a cien. Si se sale de este rango, el formulario debería mostrar un error grupal indicando que está fuera del rango esperado.

Implementar estos pasos no solo hará que tu aplicación sea más robusta, sino que aumentará tu competencia en el desarrollo de formularios complejos. Tus habilidades para manejar validaciones en Angular se beneficiarán enormemente al agregar esta herramienta a tu arsenal. ¡Sigue adelante y sigue explorando!