Angular Academy · leksjon

FormArray og dynamiske felt

Legg til og fjern skjemakontroller under kjøring.

Leksjon 2 av 413 trinn

FormArray og dynamiske felt er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Dynamiske feltsett

Noen skjemaer har et variabelt antall felt, for eksempel en liste over telefonnumre eller ordrelinjer. FormArray håndterer en ordnet samling av kontroller som kan utvides.

Opprette en FormArray

En FormArray inneholder en tabell med kontroller eller grupper.

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

Inne i en FormGroup

Legg tabellen inn i en overordnet gruppe, slik at den blir en del av den samlede skjemaverdien.

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

Legge til kontroller

Kall push for å legge til en ny kontroll dynamisk.

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

Fjerne kontroller

Bruk removeAt(index) for å slette en bestemt kontroll.

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

Gjengi med @for

Iterer over tabellens kontroller i malen, og bind hver kontroll ved hjelp av indeksen med formControlName.

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

Direktivet formArrayName

formArrayName kobler en malblokk til tabellen, og den indre formControlName bruker den numeriske indeksen.

Tabeller med grupper

For mer innholdsrike elementer kan De lagre FormGroup-er i tabellen, for eksempel hver kontakt med navn og nummer.

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

Gjengi gruppeelementer

Bruk formGroupName sammen med indeksen for hver gruppe i tabellen.

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

Lese verdien

Tabellverdien er en vanlig tabell i riktig rekkefølge, og gjenspeiler de gjeldende kontrollene.

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

Tømme tabellen

clear() fjerner alle kontroller samtidig, noe som er praktisk når en dynamisk del skal tilbakestilles.

this.phones.clear();

Hurtigsjekk

Test forståelsen Deres av FormArray.

Besvar den i den interaktive leksjonen

Oppsummering

De har lært at FormArray håndterer en dynamisk, ordnet samling av kontroller eller grupper ved hjelp av push, removeAt og clear, og at den gjengis med formArrayName samt indeksert formControlName/formGroupName.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «FormArray og dynamiske felt» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «FormArray og dynamiske felt», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «FormArray og dynamiske felt»?

Legg til og fjern skjemakontroller under kjøring. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «FormArray og dynamiske felt»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy