Angular Academy · Lektion

FormArray och dynamiska fält

Lägg till och ta bort formulärkontroller under körning.

Lektion 2 av 413 steg

FormArray och dynamiska fält är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Dynamiska fältuppsättningar

Vissa formulär har ett varierande antal fält, till exempel en lista med telefonnummer eller radobjekt. FormArray hanterar en ordnad samling kontroller som kan växa.

Skapa en FormArray

En FormArray innehåller en array med kontroller eller grupper.

const phones = new FormArray([
  new FormControl(''),
  new FormControl('')
]);

Inuti en FormGroup

Bädda in arrayen i en överordnad grupp så att den blir en del av hela formulärvärdet.

const form = new FormGroup({
  name: new FormControl(''),
  phones: new FormArray<FormControl<string>>([])
});

Lägga till kontroller

Anropa push för att dynamiskt lägga till en ny kontroll sist.

addPhone() {
  this.phones.push(new FormControl('', { nonNullable: true }));
}

Ta bort kontroller

Använd removeAt(index) för att ta bort en specifik kontroll.

removePhone(i: number) {
  this.phones.removeAt(i);
}

Rendera med @for

Iterera över arrayens kontroller i mallen och bind varje kontroll till sitt index med formControlName.

<div formArrayName="phones">
  @for (ctrl of phones.controls; track $index) {
    <input [formControlName]="$index" />
  }
</div>

Direktivet formArrayName

formArrayName kopplar ett mallblock till arrayen, och det inre formControlName använder det numeriska indexet.

Arrayer med grupper

För mer innehållsrika objekt kan Ni lagra FormGroup-objekt i arrayen, till exempel en kontakt med namn och nummer.

const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
  label: new FormControl(''),
  number: new FormControl('')
}));

Rendera gruppobjekt

Använd formGroupName med indexet för varje grupp i arrayen.

@for (g of contacts.controls; track $index) {
  <div [formGroupName]="$index">
    <input formControlName="label" />
    <input formControlName="number" />
  </div>
}

Läsa värdet

Arrayens värde är en vanlig array i rätt ordning och återspeglar de aktuella kontrollerna.

const list = this.phones.value; // string[]

Tömma arrayen

clear() tar bort alla kontroller på en gång, vilket är praktiskt när en dynamisk sektion återställs.

this.phones.clear();

Snabbtest

Testa hur väl Ni förstår FormArray.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt Er att FormArray hanterar en dynamisk, ordnad samling kontroller eller grupper med hjälp av push, removeAt och clear, och renderas med formArrayName samt indexerade formControlName/formGroupName.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”FormArray och dynamiska fält” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”FormArray och dynamiska fält”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”FormArray och dynamiska fält”?

Lägg till och ta bort formulärkontroller under körning. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”FormArray och dynamiska fält”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy