Validación personalizada en formularios de Angular

Aprenda a implementar validadores personalizados para garantizar una validación sólida de los formularios en sus aplicaciones Angular.

¿Qué es la validación personalizada?

Los validadores personalizados le permiten definir su propia lógica de validación, además de los validadores integrados como required o minlength.

Creación de un validador personalizado

Un validador personalizado es una función sencilla que devuelve null si el valor es válido o un objeto si no lo es:

function forbiddenNameValidator(control: AbstractControl): { [key: string]: any } | null {
  return control.value === 'admin' ? { 'forbiddenName': true } : null;
}

Aplicación del validador

Aplique el validador personalizado a su control de formulario:

this.myForm = new FormGroup({
  username: new FormControl('', [forbiddenNameValidator])
});

Visualización de errores de validación

Muestre mensajes de error condicionalmente en su plantilla según el estado de validación:

<div *ngIf="myForm.get('username').hasError('forbiddenName')">
  Username 'admin' is not allowed.
</div>

Uso de directivas de validación

Los validadores también se pueden usar directamente como directivas para formularios basados en plantillas:

<input name="username" ngModel forbiddenName>

Validadores asíncronos

Los validadores asíncronos permiten realizar validaciones que implican operaciones asíncronas, como comprobaciones en el servidor:

username: new FormControl('', null, [asyncValidator])

Prueba de validadores personalizados

Pruebe siempre los validadores para garantizar que se comporten correctamente en distintos escenarios y casos límite.

Resumen

Ha aprendido a crear y aplicar validadores personalizados para realizar una validación sólida de formularios en Angular. ¡Excelente trabajo!