50. Formulaires dynamiques avec FormArray

FormArray est le mécanisme permettant de gérer des collections de contrôles dont le nombre d'éléments peut changer à l'exécution (ex : ajout de numéros de téléphone, d'adresses ou de tags).

1. Créer le FormArray

Nous définissons le FormArray à l'intérieur de notre FormGroup.

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

export class DynamicFormComponent { dynamicForm: FormGroup;

constructor(private fb: FormBuilder) { this.dynamicForm = this.fb.group({ email: ['', Validators.required], phones: this.fb.array([this.createPhoneGroup()]) // Initialisation avec un élément }); }

// Fonction d'aide pour créer un nouveau FormGroup pour un téléphone createPhoneGroup(): FormGroup { return this.fb.group({ type: ['home'], number: ['', Validators.required] }); }

// Getter pour accéder facilement au FormArray 'phones' dans le template get phoneControls() { return this.dynamicForm.get('phones') as FormArray; }

addPhone() { this.phoneControls.push(this.createPhoneGroup()); }

removePhone(index: number) { this.phoneControls.removeAt(index); } }

2. Liaison du FormArray dans le template

On utilise formArrayName sur le conteneur et formGroupName sur les éléments itérés, en utilisant *ngFor sur le tableau phoneControls.controls.

html

  <select formControlName="type">
    <option value="mobile">Mobile</option>
    <option value="home">Fixe</option>
  </select>
  
  <input type="text" formControlName="number" placeholder="Numéro">
  
  <button type="button" (click)="removePhone(i)">Supprimer</button>
</div>