Thomas Gassmann Trivadis AG

Einfache Formulare können gut mit dem Template-driven-Forms-Ansatz umgesetzt werden. Sind Validierungen über mehrere Felder oder das dynamische Hinzufügen von Formularelementen nötig, sind Reactive Forms die bessere Wahl.

Formulare waren schon immer ein zentraler Bestandteil von Webanwendungen. Die meisten Businessanwendungen bieten auch heute noch einen großen Teil ihrer Funktionalität in Form von Formularen an. Das Framework Angular bietet mit Template-driven Forms und Reactive Forms zwei Varianten zur Erstellung von Formularen an. Die Validierung der Eingabe auf Formular- oder Elementebene, und die Anzeige von Fehlermeldungen übernimmt das Framework.

In Angular gibt es zwei unterschiedliche Varianten für die Formularerstellung: Template-driven Forms und Reactive Forms. Letztere wurden früher auch als Model-driven Forms bezeichnet. Beide Varianten verwenden im Hintergrund das gleiche Konzept, das im Laufe dieser Artikelserie genauer erläutert werden wird.

Die beiden Formulararten unterscheiden sich in der Aufteilung der Verantwortung. Bei den Template-driven Forms spielt das Template die Hauptrolle. Die Verantwortung des Formulars wird dabei dem Template übergeben und mithilfe von HTML und Data Binding definiert und erstellt.

Bei Reactive Forms hingegen wird ein Großteil der Verantwortung an die ComponentKlasse abgegeben. Das Formular wird zwar mit HTML erstellt, aber das Management der Daten und ihre Validierung werden im Code der Component-Klasse definiert.

Diese Artikelserie wird zeigen, wie diese zwei Arten von Formularen in Angular-Applikationen eingesetzt werden und was sie unterscheidet. Zum Einstieg betrachten wir zunächst die Grundlagen und Template-driven Forms, der zweite Teil wird die Reactive Forms und die Unterschiede beider zwischen den beiden Varianten behandeln.

Artikelserie
Teil 1: Template-driven Forms
Teil 2: Reactive Forms

Was sind Template-driven Forms?

Ist die Rede von Template-driven Forms, so ist die Variante gemeint, mit der in AngularJS Formulare umgesetzt wurden. Mit AngularJS ist dabei Angular vor Version 2.0 gemeint. Template-driven Forms basieren sehr stark auf dem Two-way Data Binding, das die Direktive ngModel zur Verfügung stellt. Der Entwickler definiert im Template das Binding zum Model sowie Validierungsregeln, beispielsweise mit den HTML-Attributen required oder minlength. Angular übernimmt die Arbeit und erstellt ein Form Model (FormGroup) und überwacht automatisch den Status des Formulars und die Status aller Input-Elemente. Bei AngularJS-Formularen mussten Angular-spezifische Direktiven wie zum Beispiel ng-required oder ng-minlength für die Validierung verwendet werden. Ab Angular 2 können die normalen HTML5-Attribute für die Validierungsregeln genutzt werden.

Die Implementierung von Template-driven Forms

Anders als bei AngularJS-Applikationen sind ngModel oder andere formularbasierte Direktiven nicht per Default verwendbar. Alle Direktiven, die in Zusammenhang mit Template-driven Forms verwendet werden, sind im Modul FormsModule enthalten. Das muss ins Root-Modul der Angular-Applikation importieren werden. Listing 1 zeigt, wie das FormsModule ins Root-Modul (AppModule) importiert wird. Das ist der normale Aufbau eines Angular-Moduls; alle externen Module wie FormsModule werden ins entsprechenden Modul der Angular-Applikation importiert.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Windows Developer 7.17 - "Apps - fix und praktisch"

Alle Infos zum Heft
579801757Formulare mit Angular schnell und einfach erstellen
X
- Gib Deinen Standort ein -
- or -