Reactive Forms - Grundlagen
Formulare sind ein zentraler Bestandteil nahezu jeder Webanwendung. Sie dienen zur Anmeldung, Dateneingabe oder zur Interaktion mit den Benutzern. Angular bietet für Formulare zwei Ansätze: Template-driven Forms und Reactive Forms. In dieser und in den folgenden Lektionen sollen Reactive Forms das Thema sein, weil sie für komplexe und skalierbare Anwendungen geeignet sind. Solche Formulare sind, zumindest auf der Seite des HTML-Templates, einfach zu verstehen. Das folgende Listing zeigt ein Formular für die Eingabe eines Vornamens und eines Nachnamens. Zusammen mit einer Schaltfläche um die Eingabe zu übernehmen, sind sie in einem form eingebettet. Die Bestätigung der Eingabe ist aber nicht immer möglich, weil sowohl Vor- und Nachname Bedingungen erfüllen müssen. Beide müssen mindestens zwei Zeichen lang sein. Angular bietet von Hause aus verschiedene Funktionen der Validierung. Daher sollte man auf diesen Luxus hier nicht verzichten. Verstößt die Eingabe gegen die Validierungsregeln, wird im HTML zusätzlich ein div-Element angezeigt, dass darüber informiert, mindestens zwei Zeichen einzugeben.
<form [formGroup]="personForm" (ngSubmit)="onSubmit()"> <h3>Namen eingeben</h3> <!-- Vorname --> <label for="firstName">Vorname:</label> <input id="firstName" type="text" formControlName="firstName" /> <div *ngIf="personForm.get('firstName')?.touched && personForm.get('firstName')?.invalid"> Vorname ist erforderlich (mind. 2 Zeichen). </div> <!-- Nachname --> <label for="lastName">Nachname:</label> <input id="lastName" type="text" formControlName="lastName" /> <div *ngIf="personForm.get('lastName')?.touched && personForm.get('lastName')?.invalid"> Nachname ist erforderlich (mind. 2 Zeichen). </div> <!-- Button --> <button type="submit" [disabled]="personForm.invalid">Speichern</button> </form>
Aufmerksamkeit im Code verdienen die zwei input-Elemente. Durch sie wird eine Eingabe in dem Formular möglich. Wichtig ist das formControlName-Attribut. In Angular hat die Aufgabe, ein Eingabefeld im HTML-Template mit einem FormControl in einer FormGroup im TypeScript-Code zu verbinden. Die Verbindung ist bidirektional. Alles, was der Anwender eingibt, wird automatisch in den FormControl gespeichert. Änderungen durch den Typescript-Code erscheinen im Gegenzug sofort im HTML. Die im Beispiel verwendeten id-Attribute der input-Elemente sind in Reactive Forms technisch nicht erforderlich, weil die Verknüpfung zwischen Template-Feld und Datenmodell über formControlName bzw. formGroup erfolgt. Trotzdem ist die Verwendung für Accessibility und eine saubere Semantik empfehlenswert. Gleiches gilt für die for-Attribute bei den label-Elementen. Sie dienen dazu, ein Label explizit mit einem Eingabefeld zu verknüpfen, indem es auf dessen id verweist. Im Typescript-Code der Komponente wird der Klasse zunächst durch Dependency Injection ein FormBuilder über den Konstruktor übergeben. Der FormBuilder wird im Anschluss verwendet um eine FormGroup zu erzeugen. Als Bezeichner müssen dort die gleichen Namen verwendet werden, wie im HTML für das Attribut formControlName. Im Beispiel sind das firstName und lastName. Dort finden sich ebenfalls in Informationen, das eine Überprüfung der Felder erforderlich ist. Validators.minLength ist eine Funktion von Angular. Wie man eigene Validierungen entwickeln kann ist das Thema einer folgenden Lektion. Die onSubmit-Methode wird aufgerufen, wenn der Anwender auf die Schaltfläche klickt. Obwohl das nur möglich sein sollte, wenn alle Angaben korrekt sind, wird die Richtigkeit des Formulars in der Methode erneut mit this.personForm.valid überprüft. In diesem einfachen Beispiel folgt anschließend eine Ausgabe der Eingabedaten auf der Konsole. Die reset-Funktion setzt das Formular zurück und leert alle Eingabefelder.
import { Component } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { ReactiveFormsModule } from '@angular/forms'; @Component({ selector: 'app-name-form', standalone: true, imports: [CommonModule, ReactiveFormsModule], templateUrl: './name-form.component.html', styleUrl: './name-form.component.scss' }) export class PersonFormComponent { constructor(private fb: FormBuilder) {} // Formular mit zwei Pflichtfeldern readonly personForm = this.fb.group({ firstName: ['', [Validators.required, Validators.minLength(2)]], lastName: ['', [Validators.required, Validators.minLength(2)]] }); // Methode wird aufgerufen, wenn das Formular gültig abgesendet wurde onSubmit(): void { if (this.personForm.valid) { console.log('Formulareingabe:', this.personForm.value); this.personForm.reset(); // Formular leeren } } }