¿Cómo crear validaciones personalizadas en Angular?

Crear validaciones personalizadas en Angular permite diseñar reglas específicas que no están cubiertas por las validaciones integradas. Por ejemplo, si necesitas que una contraseña contenga un número, puedes implementar tu propia lógica. Pero, ¿cómo se logra esto en Angular? Vamos a explorarlo paso a paso.

¿Qué necesitamos para empezar?

Para agregar una validación personalizada en Angular, es crucial tener un formulario previamente construido. En el ejemplo que veremos, utilizamos un formulario de registro que debe validar la presencia de al menos un número en el campo de contraseña. Además, se recomienda contar con conocimientos básicos de JavaScript y TypeScript, dado que se utilizarán funciones específicas de estos lenguajes en el proceso.

¿Cómo implementamos la lógica en JavaScript?

Se necesita comprender ciertos métodos de JavaScript para implementar la validación de manera eficaz:

1. Convertir el string en un array: Utilizamos split('') para separar cada caracter de la contraseña en un arreglo:

   fullscreen
   let password = 'Juanito2010';
   let caracteres = password.split('');

2. Encontrar un número: Empleamos find para verificar la existencia de al menos un número:

   fullscreen
   const contieneNumero = caracteres.find(caracter => !isNaN(parseInt(caracter)));

3. Verificar el tipo de dato: La función isNaN ayuda a identificar si un caracter es un número después de intentar convertirlo con parseInt.

Creación de la validación personalizada en TypeScript

La validación personalizada se implementa como un método estático dentro de una clase de validadores, como se muestra a continuación:

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

export class MyValidators {
  static validPassword(control: AbstractControl): ValidationErrors | null {
    const value: string = control.value || '';

    // Split the string and find any numeric character
    const contieneNumero = value.split('').find(caracter => !isNaN(parseInt(caracter)));

    // Return null if the password contains a number (valid), otherwise return an error
    return contieneNumero ? null : { invalidPassword: true };
  }
}

¿Cómo integrarlo en el formulario?

Una vez que el método esté listo, se integra en el formulario de la siguiente manera:

1. Importar el validador en el componente:

   fullscreen
   import { MyValidators } from '[ruta-a-utils]/validators';

2. Incorporar al FormGroup:

   fullscreen
   this.form = this.formBuilder.group({
     password: ['', [Validators.required, MyValidators.validPassword]],
     // otros campos...
   });

3. Visualización de errores en el template: Utiliza *ngIf para mostrar errores específicos:

   fullscreen
   <mat-error *ngIf="form.get('password').hasError('invalidPassword')">
     La contraseña debe contener al menos un número.
   </mat-error>

Probando la validación

Para asegúrate de que tu validación funciona:

1. Intenta ingresar una contraseña solo con letras y observa si muestra el mensaje de error.
2. Luego, ingresa una contraseña que incluya al menos un número y verifica que el mensaje desaparezca.

Con este proceso, no solo fortaleces la seguridad de tus formularios, sino que también ofreces una mejor experiencia de usuario. A medida que te familiarices con las validaciones personalizadas, encontrarás que puedes adaptar las reglas de acuerdo a las necesidades específicas de tu aplicación. ¡Anímate a seguir explorando y mejorando tus habilidades en Angular!