© Excellent backgrounds/Shutterstock.com
Java Magazin
Teil 3: Formulare und Validierung

Deklarativ oder imperativ?

Angular kommt mit zwei Ansätzen für die Verwaltung von Formularen. Während der deklarative Ansatz etwas einfacher zu nutzen ist, bietet der imperative mehr Freiheiten. Daneben unterstützt das SPA-Framework aus der Feder von Google auch das Einbinden von synchronen und asynchronen Validierungsregeln.

Manfred Steyer


ArtikelserieTeil 1: Erste Schritte mit Angular 2 und TypeScriptTeil 2: Komponenten und der Component RouterTeil 3: Formulare und Validierung

Eine Stärke von Angular ist seit jeher die Verwaltung von Formularen. Angular 2 bringt hierzu gleich zwei Ansätze: einen deklarativen und einen imperativen. Ersterer sieht vor, dass der Entwickler die benötigten Formulare zur Gänze über HTML-Markup beschreibt. Hierbei ist auch von Template-driven Forms die Rede. Entscheidet sich der Entwickler hingegen für den imperativen Ansatz, so beschreibt er das Formular zum größten Teil über einen Objektgraphen und bietet diesen über den Component-Controller an. Während der deklarative Ansatz in der Regel mit weniger Aufwand einhergeht, bietet die imperative Alternative dem Entwickler mehr Kontrolle.

UpdateSeit RC 2 ist die Unterstützung für Formulare explizit zu aktivieren. Hierzu nutzt die Anwendung die Methode provideForms, welche die nötigen Provider zurückliefert. Diese müssen in das Provider-Array, welches die Anwendung beim Hochfahren an bootstrap übergibt, eingetragen werden. Um die nun veraltete Formularunterstützung zu deaktivieren, bietet Angular 2 zusätzlich die Methode disableDeprecatedForms:import {provideForms, disableDeprecatedForms} from '@angular/forms';[...]var providers = [ disableDeprecatedForms(), provideForms(), [...]]; bootstrap(AppComponent, providers);

Dieser Artikel geht auf beide Ansätze ein und beschreibt auch die Validierung von Eingaben. Dazu betrachte ich die Entwicklung eines Formulars zum Editieren von Flügen (Abb. 1). Der gesamte Quellcode findet sich unter [1].

Abb. 1: Formular mit Validierungsfehler

Deklarative Formulare

Der Einsatz deklarativer Formulare ist vom Prinzip her einfach: Der Entwickler bindet lediglich Eingabesteuerelemente mittels ngModel und Two-Way Data Binding an die jeweiligen Eigenschaften:

Zusätzlich hat er die Möglichkeit, Validierungsregeln über Attribute anzugeben. Das nachfolgende Beispiel zeichnet auf diese Weise das Eingabefeld als Pflichtfeld mit mindestens drei Zeichen aus:

Im Hintergrund erzeugt Angular einen Objekt­graphen, der das gesamte deklarative Formular beschreibt (Abb. 2). An der Spitze dieses baumförmigen Graphen findet sich ein Objekt vom Typ FormDirective. Es steht für das gesamte Formular und zeigt unter anderem an, ob es korrekt validiert (valid) oder verändert (dirt...

Java Magazin
Teil 3: Formulare und Validierung

Deklarativ oder imperativ?

Angular kommt mit zwei Ansätzen für die Verwaltung von Formularen. Während der deklarative Ansatz etwas einfacher zu nutzen ist, bietet der imperative mehr Freiheiten. Daneben unterstützt das SPA-Framework aus der Feder von Google auch das Einbinden von synchronen und asynchronen Validierungsregeln.

Manfred Steyer


ArtikelserieTeil 1: Erste Schritte mit Angular 2 und TypeScriptTeil 2: Komponenten und der Component RouterTeil 3: Formulare und Validierung

Eine Stärke von Angular ist seit jeher die Verwaltung von Formularen. Angular 2 bringt hierzu gleich zwei Ansätze: einen deklarativen und einen imperativen. Ersterer sieht vor, dass der Entwickler die benötigten Formulare zur Gänze über HTML-Markup beschreibt. Hierbei ist auch von Template-driven Forms die Rede. Entscheidet sich der Entwickler hingegen für den imperativen Ansatz, so beschreibt er das Formular zum größten Teil über einen Objektgraphen und bietet diesen über den Component-Controller an. Während der deklarative Ansatz in der Regel mit weniger Aufwand einhergeht, bietet die imperative Alternative dem Entwickler mehr Kontrolle.

UpdateSeit RC 2 ist die Unterstützung für Formulare explizit zu aktivieren. Hierzu nutzt die Anwendung die Methode provideForms, welche die nötigen Provider zurückliefert. Diese müssen in das Provider-Array, welches die Anwendung beim Hochfahren an bootstrap übergibt, eingetragen werden. Um die nun veraltete Formularunterstützung zu deaktivieren, bietet Angular 2 zusätzlich die Methode disableDeprecatedForms:import {provideForms, disableDeprecatedForms} from '@angular/forms';[...]var providers = [ disableDeprecatedForms(), provideForms(), [...]]; bootstrap(AppComponent, providers);

Dieser Artikel geht auf beide Ansätze ein und beschreibt auch die Validierung von Eingaben. Dazu betrachte ich die Entwicklung eines Formulars zum Editieren von Flügen (Abb. 1). Der gesamte Quellcode findet sich unter [1].

Abb. 1: Formular mit Validierungsfehler

Deklarative Formulare

Der Einsatz deklarativer Formulare ist vom Prinzip her einfach: Der Entwickler bindet lediglich Eingabesteuerelemente mittels ngModel und Two-Way Data Binding an die jeweiligen Eigenschaften:

Zusätzlich hat er die Möglichkeit, Validierungsregeln über Attribute anzugeben. Das nachfolgende Beispiel zeichnet auf diese Weise das Eingabefeld als Pflichtfeld mit mindestens drei Zeichen aus:

Im Hintergrund erzeugt Angular einen Objekt­graphen, der das gesamte deklarative Formular beschreibt (Abb. 2). An der Spitze dieses baumförmigen Graphen findet sich ein Objekt vom Typ FormDirective. Es steht für das gesamte Formular und zeigt unter anderem an, ob es korrekt validiert (valid) oder verändert (dirt...

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