Lab 02 : FormArray pour les Tags

📖 Ressources

• Documentation Reactive Forms
• Patterns FormArray
• Référence Modèle Album

🚀 Code de Départ

step-2-album-wholesale-v16-post-add-album

Dans ce lab, vous allez ajouter une gestion dynamique de tags au formulaire d’album en utilisant FormArray. Vous allez implémenter des méthodes pour ajouter et supprimer des contrôles de formulaire dynamiquement, permettant aux utilisateurs de créer plusieurs champs de tags à la volée.

📝 Instructions

Étape 1 : Ajouter FormArray au Formulaire

Ajoutez un FormArray pour des champs dynamiques :

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

private fb = inject(FormBuilder);

albumForm = this.fb.group({
  name: ['', Validators.required],
  artist: ['', Validators.required],
  tags: this.fb.array([])  // FormArray pour les tags
});

get tags(): FormArray {
  return this.albumForm.get('tags') as FormArray;
}

Étape 2 : Ajouter/Supprimer des Éléments

Méthodes pour gérer le FormArray :

addTag() {
  this.tags.push(this.fb.control('', Validators.required));
}

removeTag(index: number) {
  this.tags.removeAt(index);
}

Étape 3 : Template avec FormArray

Itérez sur le FormArray dans le template :

<div formArrayName="tags">
  <div *ngFor="let tag of tags.controls; let i = index">
    <input [formControlName]="i" placeholder="Tag">
    <button type="button" (click)="removeTag(i)">Remove</button>
  </div>
  <button type="button" (click)="addTag()">Add Tag</button>
</div>