Crear validación personalizada de formularios reactivos en Angular
Publicado el 04.09.2021 a las 10:30
Actualizado el 09.07.2023 a las 13:37
Crear validación personalizada de formularios reactivos en Angular
Validaciones propias de Angular
Creando la validación personalizada
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 en varios componentes te recomiendo que la crees en un archivo distinto para poder reutilizar el código, recuerda don't repeat yourself (DRY)
Declaras como público en el componente el formulario reactivo.
En el constructor asignas al campo del formulario que te interese la validación personalizada, que yo llamaré passwordValidator
public form: FormGroup = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [Validators.required, Validators.minLength(12)]),
passwordRepeted: new FormControl('', [Validators.required, Validators.minLength(12)]),
});
constructor() {
this.form.get('passwordRepeted')?.setValidators([Validators.required, 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 () => {
const password = this.form.get('password')?.value;
const repeat_password = this.form.get('repeat_password')?.value;
if(!password || !repeat_password) return { isValid: false };
if(password!==repeat_password) return {isValid:false};
return null;
};
}
Hasta luego 🖖
¿Te gusta mi contenido? Apóyame
Puede que te interesen los siguientes artículos 👇
