FormArray e campi dinamici
Aggiungere e rimuovere controlli del form a runtime
FormArray e campi dinamici è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Insiemi dinamici di campi
Alcuni form hanno un numero variabile di campi, ad esempio un elenco di numeri di telefono o di voci. FormArray gestisce una raccolta ordinata ed espandibile di controlli.
Creare un FormArray
Un FormArray contiene un array di controlli o gruppi.
const phones = new FormArray([
new FormControl(''),
new FormControl('')
]);All'interno di un FormGroup
Inserisca l'array in un gruppo padre, così farà parte del valore dell'intero form.
const form = new FormGroup({
name: new FormControl(''),
phones: new FormArray<FormControl<string>>([])
});Aggiungere controlli
Chiami push per aggiungere dinamicamente un nuovo controllo.
addPhone() {
this.phones.push(new FormControl('', { nonNullable: true }));
}Rimuovere controlli
Utilizzi removeAt(index) per eliminare un controllo specifico.
removePhone(i: number) {
this.phones.removeAt(i);
}Eseguire il rendering con @for
Iteri sui controlli dell'array nel template, associando ciascuno al relativo indice con formControlName.
<div formArrayName="phones">
@for (ctrl of phones.controls; track $index) {
<input [formControlName]="$index" />
}
</div>La direttiva formArrayName
formArrayName collega un blocco del template all'array e il formControlName interno utilizza l'indice numerico.
Array di gruppi
Per elementi più ricchi, memorizzi i FormGroup nell'array, ad esempio un contatto con nome e numero.
const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
label: new FormControl(''),
number: new FormControl('')
}));Eseguire il rendering degli elementi gruppo
Utilizzi formGroupName con l'indice per ogni gruppo dell'array.
@for (g of contacts.controls; track $index) {
<div [formGroupName]="$index">
<input formControlName="label" />
<input formControlName="number" />
</div>
}Leggere il valore
Il valore dell'array è un normale array ordinato che riflette i controlli attuali.
const list = this.phones.value; // string[]Svuotare l'array
clear() rimuove tutti i controlli in una sola volta, utile quando si reimposta una sezione dinamica.
this.phones.clear();Controllo rapido
Verifichi la Sua comprensione di FormArray.
Riepilogo
Ha imparato che FormArray gestisce una raccolta dinamica e ordinata di controlli o gruppi, utilizzando push, removeAt e clear, con rendering tramite formArrayName e formControlName/formGroupName indicizzati.
Domande Frequenti
La lezione «FormArray e campi dinamici» è gratuita?
Sì — il testo completo di «FormArray e campi dinamici» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «FormArray e campi dinamici»?
Aggiungere e rimuovere controlli del form a runtime Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «FormArray e campi dinamici»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Form reattivi tipizzati
- FormArray e campi dinamici
- Validatori asincroni
- Pattern di FormBuilder