Angular Academy · Lektion

Typade reaktiva formulär

Bygg formulär med strikt typning.

Lektion 1 av 413 steg

Typade reaktiva formulär är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 1 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.

Varför typade formulär?

Före Angular 14 hade värden i reaktiva formulär typen any. Typade reaktiva formulär ger fullständig typsäkerhet: kompilatorn känner till formen på formulärvärdet och namnen på kontrollerna.

En typad FormControl

En FormControl är generisk. Ange värdetypen så kontrolleras läsningar och skrivningar.

const name = new FormControl<string>('', {
  nonNullable: true
});

En typad FormGroup

En FormGroup härleder värdetypen från de kontroller Ni skickar in.

const form = new FormGroup({
  email: new FormControl(''),
  age: new FormControl(0)
});

Härledd värdetyp

value för gruppen ovan har typen { email: string | null; age: number | null }, och allt kontrolleras vid kompilering.

const v = form.value; // typed automatically

Nullable värden

Som standard kan kontroller återställas till null, så deras värdetyp innehåller | null. Använd nonNullable för att utesluta null.

new FormControl('', { nonNullable: true });
// value type: string (no null)

Säker åtkomst till kontroller

form.controls.email är starkt typad, så stavfel i kontrollnamn upptäcks av kompilatorn.

form.controls.email.setValue('a@b.com');

get jämfört med controls

Föredra form.controls.name framför form.get('name') för typsäkerhet; get returnerar en löst typad AbstractControl | null.

getRawValue

getRawValue() returnerar alla värden, inklusive inaktiverade kontroller, till skillnad från value som utelämnar inaktiverade kontroller.

const all = form.getRawValue();

Kapslade grupper

Typade grupper kan kombineras. En kapslad FormGroup bidrar med sin egen typade struktur till det överordnade värdet.

const form = new FormGroup({
  user: new FormGroup({
    first: new FormControl(''),
    last: new FormControl('')
  })
});

Typsäkerhet med patchValue

patchValue accepterar en delmängd av formulärvärdet; okända nycklar markeras av kompilatorn.

form.patchValue({ email: 'x@y.com' });

Migrera äldre formulär

Otypade API:er som UntypedFormGroup finns för stegvis migrering. Ny kod bör använda de typade klasserna för bättre säkerhet.

Snabbtest

Testa hur väl Ni förstår typade reaktiva formulär.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt Er att typade reaktiva formulär gör FormControl/FormGroup generiska och härleder en kontrollerad värdestruktur, att standardvärden innehåller | null (vilket kan undvikas med nonNullable) och att åtkomst via controls är säkrare än get.

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 ”Typade reaktiva formulär” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Typade reaktiva formulär”, 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 ”Typade reaktiva formulär”?

Bygg formulär med strikt typning. 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 1 av 4.

Hur lång tid tar lektionen ”Typade reaktiva formulär”?

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