Typede reaktive formularer
Opbyg formularer med streng typning.
Typede reaktive formularer er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 1 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.
Hvorfor typede formularer?
Før Angular 14 blev værdier i reaktive formularer typet som any. Typede reaktive formularer giver fuld typesikkerhed: compileren kender formen på formularværdien og navnene på kontrollerne.
En typet FormControl
En FormControl er generisk. Angiv værditypen, så læsninger og skrivninger bliver kontrolleret.
const name = new FormControl<string>('', {
nonNullable: true
});En typet FormGroup
En FormGroup udleder sin værditype fra de kontroller, du overfører.
const form = new FormGroup({
email: new FormControl(''),
age: new FormControl(0)
});Udledt værditype
value for gruppen ovenfor er typet som { email: string | null; age: number | null }, og det hele kontrolleres på compileringstidspunktet.
const v = form.value; // typed automaticallyNullérbarhed
Kontroller kan som standard nulstilles til null, så deres værditype indeholder | null. Brug nonNullable for at udelukke null.
new FormControl('', { nonNullable: true });
// value type: string (no null)Sikker adgang til kontroller
form.controls.email er stærkt typet, så stavefejl i kontrolnavne opdages af compileren.
form.controls.email.setValue('a@b.com');get kontra controls
Foretræk form.controls.name frem for form.get('name') for at opnå typesikkerhed; get returnerer en løst typet AbstractControl | null.
getRawValue
getRawValue() returnerer alle værdier, inklusive kontroller, der er deaktiverede, i modsætning til value, som udelader de deaktiverede.
const all = form.getRawValue();Indlejrede grupper
Typede grupper kan sammensættes. En indlejret FormGroup bidrager med sin egen typede form til forælderværdien.
const form = new FormGroup({
user: new FormGroup({
first: new FormControl(''),
last: new FormControl('')
})
});Typesikkerhed for patchValue
patchValue accepterer en delmængde af formularværdien; ukendte nøgler markeres af compileren.
form.patchValue({ email: 'x@y.com' });Migrering af ældre formularer
Utypede API'er som UntypedFormGroup findes til trinvis migrering. Ny kode bør bruge de typede klasser af hensyn til sikkerheden.
Hurtigt tjek
Test din forståelse af typede reaktive formularer.
Opsummering
Du har lært, at typede reaktive formularer gør FormControl/FormGroup generiske og udleder en kontrolleret form på værdien, at standarderne inkluderer | null (hvilket kan undgås med nonNullable), og at adgang via controls er sikrere end get.
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
Ofte stillede spørgsmål
Er lektionen “Typede reaktive formularer” gratis?
Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Typede reaktive formularer”, 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 “Typede reaktive formularer”?
Opbyg formularer med streng typning. 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 1 af 4.
Hvor lang tid tager lektionen “Typede reaktive formularer”?
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
- Typede reaktive formularer
- FormArray og dynamiske felter
- Asynkrone validatorer
- FormBuilder-mønstre