FormArray et champs dynamiques
Ajoutez et supprimez des contrôles de formulaire à l’exécution
FormArray et champs dynamiques est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Ensembles de champs dynamiques
Certains formulaires comportent un nombre variable de champs, par exemple une liste de numéros de téléphone ou de lignes d’articles. FormArray gère une collection ordonnée et extensible de contrôles.
Créer un FormArray
Un FormArray contient un tableau de contrôles ou de groupes.
const phones = new FormArray([
new FormControl(''),
new FormControl('')
]);Dans un FormGroup
Intégrez le tableau dans un groupe parent afin qu’il fasse partie de la valeur globale du formulaire.
const form = new FormGroup({
name: new FormControl(''),
phones: new FormArray<FormControl<string>>([])
});Ajouter des contrôles
Appelez push pour ajouter dynamiquement un nouveau contrôle à la fin.
addPhone() {
this.phones.push(new FormControl('', { nonNullable: true }));
}Supprimer des contrôles
Utilisez removeAt(index) pour supprimer un contrôle précis.
removePhone(i: number) {
this.phones.removeAt(i);
}Afficher avec @for
Parcourez les contrôles du tableau dans le modèle et liez chacun d’eux à l’aide de son index avec formControlName.
<div formArrayName="phones">
@for (ctrl of phones.controls; track $index) {
<input [formControlName]="$index" />
}
</div>La directive formArrayName
formArrayName relie un bloc du modèle au tableau, et le formControlName interne utilise l’index numérique.
Tableaux de groupes
Pour des éléments plus riches, stockez des FormGroup dans le tableau, par exemple un contact avec un nom et un numéro.
const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
label: new FormControl(''),
number: new FormControl('')
}));Afficher les éléments d’un groupe
Utilisez formGroupName avec l’index de chaque groupe du tableau.
@for (g of contacts.controls; track $index) {
<div [formGroupName]="$index">
<input formControlName="label" />
<input formControlName="number" />
</div>
}Lire la valeur
La valeur du tableau est un tableau simple, dans l’ordre, qui reflète les contrôles actuels.
const list = this.phones.value; // string[]Vider le tableau
clear() supprime tous les contrôles en une seule fois, ce qui est pratique pour réinitialiser une section dynamique.
this.phones.clear();Vérification rapide
Vérifiez votre compréhension de FormArray.
Récapitulatif
Vous avez appris que FormArray gère une collection dynamique et ordonnée de contrôles ou de groupes, à l’aide de push, removeAt et clear, affichée avec formArrayName ainsi que formControlName/formGroupName indexés.
Questions Fréquemment Posées
La leçon « FormArray et champs dynamiques » est-elle gratuite ?
Oui — le texte complet de « FormArray et champs dynamiques » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « FormArray et champs dynamiques » ?
Ajoutez et supprimez des contrôles de formulaire à l’exécution Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « FormArray et champs dynamiques » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Formulaires réactifs typés
- FormArray et champs dynamiques
- Validateurs asynchrones
- Modèles avec FormBuilder