Angular: Reactive Forms im Überblick

In der neuen Version von Angular (ab der Version 2) gibt es zwei unterschiedliche Vorgehen bei der Erstellung von Formularen. Zum einen gibt es den templategetriebenen Ansatz (template driven forms), der auf Direktiven im Template und Zwei-Wege-Datenbindung (two way data binding) basiert. Zum anderen gibt es den flexibleren Reactive Forms Ansatz, bei dem man die Formulare direkt in der component-Klasse definiert und mit Hilfe von Objekten modelliert. Um die Daten aus dem Formular zu holen und die Daten an das Formular zu übertragen, verwendet man das Paradigma reactive programming. Daher der Name Reactive Forms.

Innerhalb dieses Beitrags werden Techniken präsentiert, die es ermöglichen, folgendes beispielhaftes Formular zu bauen.

Beispiel auf GitHub ansehen

Vorteile von Reactive Forms im Überblick:

• Sehr gute Möglichkeiten die Formulare mit unit tests zu testen
• Saubere Trennung des Template (Darstellung) von der Logik
• Sehr gute Möglichkeiten dynamische Forms z.B anhand einer JSON-Schema-Datei zu erstellen
• Sehr gute Unterstützung für komplexe Validierungslogik

Kernbestandteile von Reactive Forms.

1. FormGroup — aggregiert Werte von allen unterliegenden FormControls und mündet sie in ein Objekt, das den Namen des FormControls als Schlüssel verwendet. Ein Root-Element eines reactive form ist immer eine FormGroup.

FormGroup interface.

• controls — ein Objekt mit sämtlichen FormControls. Der Schlüssel entspricht dem Namen des jeweiligen FormControls.
• registerControl — registriert ein FormControl für die FormGroup. Der Wert und Gültigkeitsstatus der FormGroup bleibt aber unverändert.
• addControl — fügt einen neuen FormControl hinzu und aktualisiert value und validity
• removeControl — entfernt einen FormControl anhand des übergebenen Namen
• setControl — ersetzt den bestehenden
• contains — prüft, ob der gegebene FormControl bereits in der FormGroup existiert
• setValue — setzt den Wert (value) der ganzen FormGroup
• patchValue — setzt den Wert (value) der ausgewählten FormControls innerhalb der FormGroup
• reset — setzt den Wert und die Validierungsstatus der FormGroup neu. Alle FormControls und die FormGroup selbst werden als pristine und untouched markiert
• getRawValue() — liefert das ganze aggregierte Value-Objekt der FormGroup inkl. der disabled-FormControls zurück.

Verwendung von FormGroup

2. FormControl — entspricht einem einzelnen Feld des Formulars und verfolgt den Wert ( value ) und Validierungsstatus ( validation status ).

FormControl interface.

FormControl Verwendung.

3. FormArray — verfolgt den Wert und Validierungsstatus eines Array von FormControls, FormGroups und FormArrays. Der Status eines FormArray wird mit dem reduce-Verfahren berechnet. Wenn ein FormControl innerhalb des FormArray invalid ist, ist das ganze FormArray invalid.

FormArray interface.

FormArray Verwendung.