© best_vector/Shutterstock.com
Teil 2: Reactive Forms

Angular-Formulare entwickeln


Angular bietet zwei unterschiedliche Varianten für die Formularerstellung an: 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 in dieser Artikelserie genauer erläutert wird.

Wir werden sehen, wie die beiden Arten von Formularen in Angular-Applikationen eingesetzt werden und was sie unterscheidet. Im ersten Teil [1] wurden die Grundlagen beschrieben und es wurde das Konzept der Template-driven Forms gezeigt. In diesem zweiten Teil wird erläutert, wie ein Formular mit der Reactive-Forms-Variante umgesetzt wird und was die Unterschiede der beiden Varianten sind.

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

Was sind Reactive Forms?

Wie Template-driven Forms sind auch Reactive Forms Bestandteil der @angular/Forms-Bibliothek und verwenden im Hintergrund die gleichen Klassen. Philosophie und Programmiertechniken unterscheiden sich jedoch deutlich. Die Reactive Forms wurden erst in Version 2 von Angular eingeführt. Das klassische Two-Way Data Binding, das über die Direktive ngModel zur Verfügung gestellt wird und stark mit dem Template-driven-Forms-Ansatz zusammenhängt, wird bei Reactive Forms nicht mehr verwendet. Darum werden bei Reactive Forms Direktiven wie ngModel, required oder minlength vermieden. Die Verantwortung der Validierung wird an die Component-Klasse übergeben. Das Formular wird mit HTML erstellt, aber die Verwaltung der Daten und die Validierung werden an die Component-Klasse delegiert. Der Code der Komponente definiert, wie mit Änderungen der Daten umgegangen wird. Anstatt dass Angular die Arbeit übernimmt, erstellt der Entwickler seine eigenen Instanzen und baut so sein Form Model in der Component-Klasse auf. Dadurch erhält der Entwickler größere Flexibilität bei der Erstellung von Formularen.

Das Form Model ist die Datenstruktur, die das HTML-­Formular repräsentiert, und spiegelt die Inputelemente im HTML-Template wider. Grundsätzlich hat jedes Inputelement ein korrespondierendes FormControl-Element im Form Model. Die Details werden im Laufe des Artikels noch genauer erläutert. Als weiterer Vorteil geben Reactive Forms dem Entwickler die Möglichkeit, die Formulare einfacher zu testen, ohne dabei ein End-to-End-Testverfahren anwenden zu müssen.

Die Implementierung von Reactive Forms

Anders als bei Template-driven Forms, in denen die Direktiven im Modul FormsModule enthalten sind, befinden sich die Direktiven für Reactive Forms im Modul ReactiveFormsModule. Es muss ins Root-Modul der Angular-Applikation importieren werden. Listing 1 zeigt, wie das ReactiveFormsModule ins Root-Modul (AppModule) importiert wird. Das entspricht dem normalen Aufbau eines Angular-Moduls, da das ReactiveFormsModule analog zu allen weiteren externen Modulen importiert wird.

Listing 1

import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [..., ReactiveFormsModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {}

Im Root-Modul (AppModule) ist ersichtlich, welche Art von Formular in der Applikation verwendet wird:

  • Das Modul ReactiveFormsModule wird importiert, wenn der Reactive-Forms-Ansatz verwendet wird, oder

  • das Modul FormsModule wird importiert, wenn mit dem Template-driven-Forms-Ansatz gearbeitet wird.

In Listing 2 ist die Struktur des Formulars ersichtlich, auf das wir uns beziehen. Im Verlauf des Artikels wird das Formular sukzessive erweitert. Das Formular besteht aus zwei Inputfeldern für Benutzername und ­E-Mail und hat zudem einen Button zum Registrieren. Es ist das gleiche Formular wie im ersten Teil dieser Artikelserie und bietet dem Leser die Möglichkeit, zu sehen, wie die Formulare der beiden Varianten in Angular umgesetzt werden können.

Listing 2

<form> <label> <span>Username</span> <input type="text" name="username"> </label> <label> <span>Email</span> <input type="email" name="email"> </label> <button type="submit">Register</button> </form>

Listing 3

import {Component} from '@angular/core'; @Component({ selector: 'register-form', templateUrl: 'app/register-form.component....

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang