47. Validation intégrée dans les Reactive Forms

Dans les Reactive Forms, les validateurs sont des fonctions définies dans la classe du composant et passées à l'instance FormControl lors de sa création. Angular fournit de nombreuses fonctions de validation standards dans la classe Validators.

1. Appliquer les validateurs intégrés

Les validateurs sont passés comme deuxième argument (ou troisième pour les validateurs asynchrones) au constructeur FormControl, généralement sous forme de tableau.

typescript import { Validators } from '@angular/forms';

// ... à l'intérieur du constructeur ou de ngOnInit

this.loginForm = this.fb.group({ username: ['', [ Validators.required, // Ne doit pas être vide Validators.minLength(5), // Doit avoir au moins 5 caractères Validators.pattern(/[a-zA-Z0-9]+/) ]], password: ['', [Validators.required]] });

2. Afficher les erreurs de validation dans le template

On utilise la méthode get() sur le FormGroup pour récupérer l'instance du contrôle et vérifier son statut et ses clés d'erreur spécifiques via la propriété errors.

html

Différence clé avec TDF : En Reactive Forms, les erreurs de validation sont accessibles via control.errors (un objet associant les clés d'erreur à leurs valeurs), que nous vérifions avec hasError() ou l'opérateur de navigation sécurisée ?..