© best_vector/Shutterstock.com
Windows Developer
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.

Manfred Steyer


Artikelserie: Eingaben mit Angular validierenTeil 1: Eigene Validierungsregeln für templategetriebene FormulareTeil 2: Validieren von reaktiven FormularenTeil 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].

Abb. 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 1import { 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.

KlasseBeschreibungAbstractControlAbstrakte Klasse, von der die nachfolgenden Klassen ableitenFormControlEinzelnes FeldFormGroupGruppierung von AbstractControl. Beschreibt ein gesamtes Formular oder zumindest einen Abschnitt eines FormularsFormArrayArray 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 Komfortmethoden für solche Aufgaben bietet. Die Komponente in Listing 2 demonstriert dies. Sie fordert per DI einen FormBuilder an und erstellt mit dessen Methode group eine FormGroup, die das gesamte Formular widerspiegelt.

Listing 2: Beschreibung eines Formulars ...

Windows Developer
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.

Manfred Steyer


Artikelserie: Eingaben mit Angular validierenTeil 1: Eigene Validierungsregeln für templategetriebene FormulareTeil 2: Validieren von reaktiven FormularenTeil 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].

Abb. 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 1import { 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.

KlasseBeschreibungAbstractControlAbstrakte Klasse, von der die nachfolgenden Klassen ableitenFormControlEinzelnes FeldFormGroupGruppierung von AbstractControl. Beschreibt ein gesamtes Formular oder zumindest einen Abschnitt eines FormularsFormArrayArray 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 Komfortmethoden für solche Aufgaben bietet. Die Komponente in Listing 2 demonstriert dies. Sie fordert per DI einen FormBuilder an und erstellt mit dessen Methode group eine FormGroup, die das gesamte Formular widerspiegelt.

Listing 2: Beschreibung eines Formulars ...

Neugierig geworden?


   
Loading...

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