Typisierte Reactive Forms
Formulare mit strenger Typisierung erstellen
Typisierte Reactive Forms ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum typisierte Formulare?
Vor Angular 14 waren die Werte reaktiver Formulare als any typisiert. Typisierte reaktive Formulare bieten vollständige Typsicherheit: Der Compiler kennt die Struktur Ihres Formularwerts und die Namen Ihrer Controls.
Ein typisiertes FormControl
Ein FormControl ist generisch. Geben Sie den Werttyp an, damit Lese- und Schreibzugriffe geprüft werden.
const name = new FormControl<string>('', {
nonNullable: true
});Ein typisiertes FormGroup
Ein FormGroup leitet seinen Werttyp aus den übergebenen Controls ab.
const form = new FormGroup({
email: new FormControl(''),
age: new FormControl(0)
});Abgeleiteter Werttyp
Der value der obigen Gruppe ist als { email: string | null; age: number | null } typisiert und wird vollständig zur Compile-Zeit geprüft.
const v = form.value; // typed automaticallyNullbarkeit
Standardmäßig können Controls auf null zurückgesetzt werden, daher enthält ihr Werttyp | null. Verwenden Sie nonNullable, um null auszuschließen.
new FormControl('', { nonNullable: true });
// value type: string (no null)Controls sicher zugreifen
form.controls.email ist strikt typisiert, sodass der Compiler Tippfehler in Control-Namen erkennt.
form.controls.email.setValue('a@b.com');get vs controls
Bevorzugen Sie aus Gründen der Typsicherheit form.controls.name gegenüber form.get('name'). get gibt ein nur lose typisiertes AbstractControl | null zurück.
getRawValue
getRawValue() gibt alle Werte einschließlich deaktivierter Controls zurück. value lässt deaktivierte Controls dagegen weg.
const all = form.getRawValue();Verschachtelte Gruppen
Typisierte Gruppen lassen sich kombinieren. Eine verschachtelte FormGroup trägt ihre eigene typisierte Struktur zum Wert der übergeordneten Gruppe bei.
const form = new FormGroup({
user: new FormGroup({
first: new FormControl(''),
last: new FormControl('')
})
});Typsicherheit bei patchValue
patchValue akzeptiert eine Teilmenge des Formularwerts. Unbekannte Schlüssel werden vom Compiler markiert.
form.patchValue({ email: 'x@y.com' });Legacy-Formulare migrieren
Ungetypte APIs wie UntypedFormGroup ermöglichen eine schrittweise Migration. Neuer Code sollte aus Sicherheitsgründen die typisierten Klassen verwenden.
Kurzer Check
Testen Sie Ihr Verständnis von typisierten reaktiven Formularen.
Zusammenfassung
Sie haben gelernt, dass typisierte reaktive Formulare FormControl und FormGroup generisch machen und dadurch eine geprüfte Wertstruktur ableiten. Standardmäßig ist | null enthalten, was sich mit nonNullable vermeiden lässt. Der Zugriff über controls ist sicherer als über get.
Häufig gestellte Fragen
Ist die Lektion „Typisierte Reactive Forms“ kostenlos?
Ja — der vollständige Text von „Typisierte Reactive Forms“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Typisierte Reactive Forms“?
Formulare mit strenger Typisierung erstellen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Typisierte Reactive Forms“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Typisierte Reactive Forms
- FormArray und dynamische Felder
- Asynchrone Validatoren
- FormBuilder-Muster