Crear validación personalizada de formularios reactivos en Angular

Crear una validación personalizada en un formulario reactivo de Angular

Validaciones propias de Angular

Angular tiene 11 métodos para crear validaciones, que son:

  class Validators {
    static min(min: number): ValidatorFn
    static max(max: number): ValidatorFn
    static required(control: AbstractControl): ValidationErrors | null
    static requiredTrue(control: AbstractControl): ValidationErrors | null
    static email(control: AbstractControl): ValidationErrors | null
    static minLength(minLength: number): ValidatorFn
    static maxLength(maxLength: number): ValidatorFn
    static pattern(pattern: string | RegExp): ValidatorFn
    static nullValidator(control: AbstractControl): ValidationErrors | null
    static compose(validators: ValidatorFn[]): ValidatorFn | null
    static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
  }

Puedes obtener más información en su sitio oficial

El objetivo de este artículo, es crear validaciones personalizadas, ya que con las validaciones que nos ofrece Angular no puedo cubrir por ejemplo, en un formulario de registro, antes de enviarlo al backend comprobar que el campo de contraseña y el de "repite contraseña" sean iguales.

Creando la validación personalizada

Yo lo voy a hacer todo dentro del mismo componente, si necesitaras usar la función de validación personalizada que vamos a crear te recomiendo que la crees en un archivo distinto para poder reutilizar el código, recuerda don't repeat yourself DRY

En el contructor creas el formulario reactivo con un form builder

  constructor(private fb: FormBuilder) {
    this.mForm = this.fb.group({
      email: new FormControl('',[Validators.required, Validators.email]),
      password: new FormControl('', [
        Validators.required, Validators.minLength(12)
      ]),
      repeat_password: new FormControl('', [
        Validators.required, Validators.minLength(12)
      ])      
    },{validators:[this.passwordValidator()]});
  }

El método personalizado que crearemos debe devolver una función (closure) según la documentación de Angular.

Si la validación es correcta, es decir, si la validación se pasa sin errores debemos devolver siempre un null, si no, debemos devolver el error como un objeto.

  public passwordValidator(): ValidatorFn {
    return (formGroup: FormGroup) => {
      const password:string = formGroup.get('password').value;
      const repeat_password:string = formGroup.get('repeat_password').value;

      if(password!==repeat_password) return {isValid:false};      
      
      return null;
    };
  }

Hasta luego 🖖

¿Te gusta mi contenido? Apóyame