© best_vector/Shutterstock.com
Teil 2: Validieren von reaktiven Formularen

Strukturiert modellieren


Validatoren für reaktive Formulare sind lediglich Funktionen und somit besonders einfach bereitzustellen. Sie können sowohl synchron als auch asynchron arbeiten und nicht nur auf einzelne Felder, sondern auch Teilformulare angewandt werden.

Artikelserie: Eingaben mit Angular validieren

Teil 1: Eigene Validierungsregeln für templategetriebene Formulare

Teil 2: Validieren von reaktiven Formularen

Teil 3: Benutzerdefiniertes Validieren

Zum Verwalten von Formularen nutzt Angular einen Objektgraphen, der das Formular samt seiner Felder und Zustände beschreibt. Kommen die im ersten Teil dieser Serie beschriebenen templategetriebenen Formulare zum Einsatz, generiert Angular diesen Objektgraphen selbstständig aus den Informationen im Markup. Dieser zweite Teil widmet sich der Validierung sogenannter reaktiver Formulare, bei denen die Anwendung selbst für die Bereitstellung des Objektgraphen verantwortlich zeichnet. Das bringt zwar zunächst mehr Aufwand mit sich, dafür hat die Anwendung aber auch mehr Freiheiten.

Wie schon beim ersten Teil, kommt auch hier zur Beschreibung der einzelnen Konzepte eine Beispielanwendung, die das Suchen nach Flügen erlaubt, zum Einsatz (Abb. 1). Die Quellcodedateien finden sich unter [1].

steyer_1.tif_fmt1.jpgAbb. 1: Beispielanwendung

Das Formular mit einem Objektgraphen beschreiben

Um reaktive Formulare nutzen zu können, müssen Sie das Angular-Modul ReactiveFormsModule in die gewünschten Anwendungsmodule aufnehmen (Listing 1).

Listing 1

import { ReactiveFormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ CommonModule, ReactiveFormsModule, [...] ], [...] }) export class FlightBookingModule { }

Danach kann für jedes benötigte Formular ein Objektgraph erzeugt werden. Tabelle 1 zeigt die Klassen, die Ihnen dafür zur Verfügung stehen. Sie sind Ihnen zum Großteil auch schon aus dem ersten Teil zu tem­plate­getriebenen Formularen bekannt.

Klasse

Beschreibung

AbstractControl

Abstrakte Klasse, von der die nachfolgenden Klassen ableiten

FormControl

Einzelnes Feld

FormGroup

Gruppierung von AbstractControl. Beschreibt ein gesamtes Formular oder zumindest einen Abschnitt eines Formulars

FormArray

Array mit AbstractControls

Tabelle 1: Klassen für den Objektgraphen

Um ein Formular mit zwei Feldern zu beschreiben, könnte der Controller eine FormGroup instanziieren und ihr zwei FormControls mit entsprechenden Werten zuweisen. Als etwas einfachere und weniger wortreiche Alternative dazu bietet sich der Einsatz der Klasse FormBuilder an, die Komfortm...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang