Développer des formulaires réactifs complexes avec Angular 18 et validations asynchrones
Dans les applications web modernes, les formulaires ne se limitent plus à des champs statiques. Ils doivent gérer des règles métier évolutives, des dépendances entre champs, une mise en forme dynamique et des validations asynchrones (ex. vérification d’un identifiant côté API). Avec Angular 18, les formulaires réactifs constituent une base robuste pour concevoir des structures maintenables et testables.
Pourquoi privilégier les formulaires réactifs
Les formulaires réactifs permettent de modéliser l’état du formulaire via des FormGroup, FormControl et des FormArray. Le code reste explicite, réutilisable et facilement testable. Les validations peuvent être synchrones (règles locales) ou asynchrones (appels HTTP, calculs côté service).
Structurer un formulaire complexe
Pour des formulaires avancés, la conception commence par une architecture claire : champs atomiques, groupes de sous-ensembles, tableaux dynamiques et dépendances conditionnelles. Une approche pratique consiste à isoler la logique de construction et les validateurs dans des fonctions dédiées.
Exemple : profil avec sections conditionnelles et tableau dynamique
L’exemple ci-dessous illustre un formulaire comportant :
- un identifiant à valider de manière asynchrone ;
- un groupe d’adresse ;
- un tableau de contacts ajouté/supprimé dynamiquement.
Identifiant
Champ obligatoire.
Longueur insuffisante.
Identifiant déjà utilisé.
Adresse
Contacts
Valeur obligatoire.
Format invalide.
`
})
export class ComplexFormComponent {
private readonly http = inject(/* service d'API */ null as any);
form = new FormGroup({
username: new FormControl('', {
validators: [Validators.required, Validators.minLength(3)],
asyncValidators: [this.createUsernameAsyncValidator()],
updateOn: 'blur'
}),
address: new FormGroup({
street: new FormControl('', Validators.required),
zip: new FormControl('', [Validators.required, Validators.pattern(/^[0-9]{5}$/)])
}),
contacts: new FormArray>([])
});
get contacts() {
return this.form.get('contacts') as FormArray;
}
addContact() {
const group = new FormGroup({
type: new FormControl<'email' | 'phone'>('email', Validators.required),
value: new FormControl('', [Validators.required, Validators.minLength(3)])
});
this.contacts.push(group);
}
removeContact(index: number) {
this.contacts.removeAt(index);
}
private createUsernameAsyncValidator(): (control: FormControl) => Observable<{ [key: string]: any } | null> {
return (control: FormControl) => {
const username = control.value?.trim?.() ?? '';
if (!username) {
return of(null);
}
// Exemple : appel API pour vérifier si l'identifiant est disponible.
return of(username).pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap((u) =>
this.checkUsernameExists(u).pipe(
map((exists) => (exists ? { usernameTaken: true } : null)),
catchError(() => of(null))
)
)
);
};
}
private checkUsernameExists(username: string): Observable {
// À remplacer par un appel réel :
// return this.http.get(`/api/users/exists?username=${encodeURIComponent(username)}`);
return of(Math.random() > 0.5);
}
}
]]>
Valider de façon asynchrone : principes essentiels
Les validateurs asynchrones suivent des règles spécifiques : Angular attend un Observable (ou un Promise) qui retourne soit : null si la valeur est valide, soit un objet d’erreurs si elle est invalide. La configuration updateOn permet de contrôler quand la validation est exécutée (ex. 'blur' pour éviter des appels HTTP à chaque frappe).
Limiter les appels réseau avec RxJS
Pour éviter la surcharge, il est recommandé d’appliquer des opérateurs RxJS : debounceTime (anti-bavardage), distinctUntilChanged (éviter les doublons) et switchMap (annuler les requêtes précédentes si une nouvelle valeur arrive).
Gestion des erreurs serveur
En cas d’échec réseau ou de réponse inattendue, la stratégie dépend du produit : soit invalider explicitement (erreur bloquante), soit considérer la valeur comme provisoirement valide pour préserver l’expérience utilisateur. Dans l’exemple, les erreurs sont converties en null.
Cas avancés : validations conditionnelles et dépendances entre champs
Les formulaires complexes exigent souvent des validations conditionnelles. Par exemple : la saisie d’un champ devient obligatoire selon la valeur d’un autre champ, ou un validateur doit utiliser plusieurs valeurs du formulaire.
Exemple : règle dépendant de plusieurs champs
Un validateur de niveau FormGroup permet d’évaluer un ensemble de champs. L’objectif est de retourner une erreur sur le groupe plutôt que sur un contrôle isolé.
{
const password = group.get('password')?.value;
const confirm = group.get('confirmPassword')?.value;
if (!password || !confirm) return null;
return password === confirm ? null : { passwordsMismatch: true };
};
}
]]>
Intégration du validateur de groupe
Appeler une validation asynchrone quand un autre champ change
Lorsqu’une validation dépend d’un contexte (ex. pays, type de compte, rôle), un mécanisme utile consiste à mettre à jour le validateur en réaction à la modification du champ source. Dans ce cas, l’approche recommandée est de reconstruire/rafraîchir le validateur du champ cible et d’appeler updateValueAndValidity().
{
vatCtrl.setAsyncValidators([this.createVatAsyncValidator()]);
vatCtrl.updateValueAndValidity();
});
}
private createVatAsyncValidator(): (control: FormControl) => Observable {
return (control: FormControl) => {
const vat = control.value?.trim?.() ?? '';
const country = this.form.get('address.country')?.value;
if (!vat || !country) return of(null);
return of({ vat, country }).pipe(
switchMap(({ vat, country }) => this.checkVat(vat, country)),
map((valid) => (valid ? null : { vatInvalid: true })),
catchError(() => of(null))
);
};
}
]]>
Observabilité et UX : états PENDING, erreurs et messages
Les contrôles avec validations asynchrones passent par différents états. Il est recommandé d’afficher un indicateur lors que la validation est en cours. Cela se fait typiquement via status === 'PENDING' et via la lecture des erreurs.
Vérification en cours…
Identifiant déjà utilisé.
]]>
Bonnes pratiques pour des formulaires maintenables
- Isoler la logique de construction du formulaire et les validateurs dans des fonctions ou services dédiés.
- Préférer updateOn: 'blur' (ou 'submit') pour les validations réseau afin de réduire les appels.
- Utiliser RxJS (debounce, distinct, switchMap) pour contrôler le flux asynchrone.
- Gérer les erreurs serveur de manière cohérente avec l’UX (bloquante ou tolérante).
- Tester les validateurs avec des unit tests et des tests d’intégration des messages d’erreur.
Conclusion
Angular 18 permet de bâtir des formulaires réactifs complexes, combinant structure modulaire, validations synchrones et asynchrones, ainsi que des interactions fines entre champs. En combinant les validateurs avec la puissance RxJS et une stratégie d’appel réseau pragmatique, les formulaires deviennent à la fois fiables, performants et faciles à maintenir.
À propos de l'auteur
Laty Gueye Samba est développeur Full Stack basé à Dakar, Sénégal. Spécialiste des écosystèmes Java / Spring Boot et Angular.
Contact : latygueyesamba@gmail.com | Dakar, Sénégal