46. RF : Utilisation de FormGroup et FormArray

Les formulaires complexes nécessitent de regrouper des contrôles. FormGroup et FormArray sont des conteneurs qui agrègent plusieurs instances de FormControl.

1. FormGroup (Groupement de contrôles)

FormGroup suit la valeur et le statut de validation d'une collection d'instances FormControl. La valeur globale du formulaire est un objet de paires clé-valeur.

Configuration dans la classe du composant

Nous utilisons le service FormBuilder (injectable) pour simplifier la création de structures imbriquées.

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

export class ProfileFormComponent { profileForm: FormGroup;

constructor(private fb: FormBuilder) { this.profileForm = this.fb.group({ firstName: ['', Validators.required], lastName: [''], address: this.fb.group({ // FormGroup imbriqué street: [''], city: ['', Validators.required] }) }); } }

Liaison dans le template

Nous lions le FormGroup du composant à l'élément <form> via [formGroup] puis nous mappons les contrôles avec formControlName.

html

2. FormArray (Listes dynamiques)

FormArray gère une collection de contrôles (ou de groupes) dont le nombre est variable (ex : liste de numéros de téléphone, liste dynamique de compétences).

typescript this.profileForm = this.fb.group({ // ... autres contrôles skills: this.fb.array([this.fb.control('Angular')]) });

// Méthode pour ajouter un nouveau contrôle dynamiquement addSkill() { (this.profileForm.get('skills') as FormArray).push(this.fb.control('')); }

// Template pour afficher les compétences //