© Excellent backgrounds/Shutterstock.com
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.

Artikelserie

Teil 1: Erste Schritte mit Angular 2 und TypeScript

Teil 2: Komponenten und der Component Router

Teil 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.

Update

Seit 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].

steyer_angular2_1.tif_fmt1.jpgAbb. 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:

<input class="form-control" [(ngModel)]="flug.abflugort">

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:

<input class="form-control" [(ngModel)]="flug.abflugort" required minlength="...

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