Angular Academy · Lektion

Mönster för FormBuilder

Skapa komplexa formulär med FormBuilder.

Lektion 4 av 413 steg

Mönster för FormBuilder är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 4 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.

Mindre standardkod

FormBuilder är en tjänst som bygger formulärgrupper, kontroller och arrayer med kortfattad syntax och undviker upprepade anrop av new FormControl(...).

Injicera FormBuilder

Injicera den i Er komponent.

private fb = inject(FormBuilder);

Bygga en grupp

fb.group tar emot ett objekt som kopplar namn till initiala värden (eventuellt även validatorer).

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

Tuple med värde och validatorer

Varje post kan vara en tuple: [initialValue, syncValidators, asyncValidators].

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

Icke-nullbar builder

fb.nonNullable skapar kontroller som aldrig är null, så reset återställer det initiala värdet i stället för null.

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

Varför nonNullable är viktigt

Med nonNullable försvinner | null från värdetyperna, och reset() återställer det ursprungliga standardvärdet, vilket oftast är det Ni vill.

Bygga arrayer

fb.array skapar en FormArray; kombinera den med fb.group för arrayer med grupper.

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

Hjälpfunktion för arrayobjekt

En fabriksmetod gör skapandet av arrayobjekt konsekvent.

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

Lägga till objekt

Lägg till den byggda gruppen sist i arrayen med push.

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

Explicit kontrollkonfiguration

För nonNullable på en enskild kontroll skickar Ni ett optionsobjekt i stället för en tuple.

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

När ska FormBuilder användas?

Använd FormBuilder för bättre läsbarhet i större formulär. Det explicita API:t med new FormControl är likvärdigt och ibland tydligare för enstaka kontroller.

Snabbtest

Testa hur väl Ni förstår mönster med FormBuilder.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt Er att FormBuilder (fb.group, fb.control, fb.array) minskar mängden standardkod, att tupler innehåller värde och validatorer och att fb.nonNullable ger icke-nullbara kontroller där reset återställer standardvärdena.

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 ”Mönster för FormBuilder” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Mönster för FormBuilder”, 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 ”Mönster för FormBuilder”?

Skapa komplexa formulär med FormBuilder. 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 4 av 4.

Hur lång tid tar lektionen ”Mönster för FormBuilder”?

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