Angular Academy · Lektion

FormBuilder-mønstre

Konstruér komplekse formularer med FormBuilder.

Lektion 4 af 413 trin

FormBuilder-mønstre er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.

Mindre gentagen kode

FormBuilder er en tjeneste, der opbygger formgrupper, kontroller og arrays med en kortfattet syntaks, så du undgår gentagne kald til new FormControl(...).

Injektion af FormBuilder

Injicér den i din komponent.

private fb = inject(FormBuilder);

Opbygning af en gruppe

fb.group tager et objekt, der knytter navne til startværdier, eventuelt sammen med validatorer.

form = this.fb.group({
  email: ['', Validators.required],
  age: [0]
});

Tuplen med værdi og validatorer

Hver post kan være en tuple: [initialValue, syncValidators, asyncValidators].

password: ['', [Validators.required, Validators.minLength(8)]]

Builder uden null-værdier

fb.nonNullable opretter kontroller, der aldrig er null, så nulstilling vender tilbage til startværdien i stedet for null.

form = this.fb.nonNullable.group({
  name: '',
  active: true
});

Hvorfor nonNullable er vigtigt

Med nonNullable fjernes | null fra værdityperne, og reset() gendanner den oprindelige standardværdi, hvilket normalt er det, du ønsker.

Opbygning af arrays

fb.array opretter et FormArray. Kombiner det med fb.group for arrays med grupper.

form = this.fb.group({
  items: this.fb.array([])
});

Hjælper til arrayelementer

En fabrikmetode sikrer, at oprettelsen af arrayelementer er ensartet.

newItem() {
  return this.fb.group({
    label: [''],
    qty: [1]
  });
}

Tilføjelse af elementer

Skub den opbyggede gruppe ind i arrayet.

get items() {
  return this.form.controls.items as FormArray;
}
add() { this.items.push(this.newItem()); }

Eksplicit konfiguration af en kontrol

Ved nonNullable på en enkelt kontrol skal du overføre et indstillingsobjekt i stedet for en tuple.

token: this.fb.control('', { nonNullable: true })

Hvornår skal FormBuilder bruges?

Brug FormBuilder for at gøre større formularer mere læselige. Den eksplicitte API med new FormControl er tilsvarende og kan være tydeligere til enkeltstående kontroller.

Hurtigt tjek

Test din forståelse af FormBuilder-mønstre.

Besvar den i den interaktive lektion

Opsummering

Du har lært, at FormBuilder (fb.group, fb.control, fb.array) reducerer gentagen kode, at tupler indeholder værdi og validatorer, og at fb.nonNullable giver kontroller uden null, hvor nulstilling vender tilbage til standardværdierne.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 38
Lektioner: 144

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “FormBuilder-mønstre” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “FormBuilder-mønstre”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “FormBuilder-mønstre”?

Konstruér komplekse formularer med FormBuilder. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Angular Academy?

Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “FormBuilder-mønstre”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Angular Academy-lektion?

Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Angular Academy