Validation personnalisée des formulaires Angular

Apprenez à implémenter des validateurs personnalisés pour garantir une validation robuste de vos formulaires Angular.

Qu’est-ce que la validation personnalisée ?

Les validateurs personnalisés vous permettent de définir votre propre logique de validation, en complément des validateurs intégrés comme required ou minlength.

Créer un validateur personnalisé

Un validateur personnalisé est une fonction simple qui renvoie null si la valeur est valide ou un objet si elle ne l’est pas :

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

Appliquer le validateur

Appliquez le validateur personnalisé à votre contrôle de formulaire :

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

Afficher les erreurs de validation

Affichez conditionnellement les messages d’erreur dans votre modèle en fonction de l’état de validation :

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

Utiliser des directives de validation

Les validateurs peuvent également être utilisés directement comme directives pour les formulaires pilotés par le modèle :

<input name="username" ngModel forbiddenName>

Validateurs asynchrones

Les validateurs asynchrones vous permettent d’effectuer des validations impliquant des opérations asynchrones, comme des vérifications sur le serveur :

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

Tester les validateurs personnalisés

Testez toujours les validateurs pour vous assurer qu’ils se comportent correctement dans différents scénarios et cas limites.

Résumé

Vous avez appris à créer et à appliquer des validateurs personnalisés pour une validation robuste des formulaires Angular. Excellent travail !