Formulare in Angular: Template-driven und Reactive Forms erklärt

Formulare sind ein zentraler Bestandteil fast jeder Webanwendung, und Angular bietet zwei leistungsstarke Ansätze, um mit Formularen zu arbeiten: template-driven Forms und reactive Forms. Beide Methoden bieten robuste Funktionen zur Verwaltung von Benutzereingaben, Formularvalidierungen und Datenbindung. In diesem Artikel geben wir einen Überblick über beide Ansätze und zeigen, wie du Formularvalidierungen umsetzt und die Formulardaten verwaltest.

Template-driven Forms vs. Reactive Forms

Angular bietet zwei Hauptmethoden zur Arbeit mit Formularen:

1. Template-driven Forms: 

• Diese Methode konzentriert sich auf die Arbeit im HTML-Template. Es wird minimaler TypeScript-Code benötigt, und die Logik zur Verwaltung der Formulare wird hauptsächlich im Template definiert.
• Ideal für einfache Formulare mit wenigen Validierungsanforderungen.

2. Reactive Forms: 

• Diese Methode bietet mehr Kontrolle über das Formular, da sie auf einer deklarativen Programmierung in TypeScript basiert. Es wird ein explizites Modell zur Verwaltung der Formulare erstellt.
• Ideal für komplexe Formulare mit fortgeschrittener Validierungslogik und dynamischen Formularfeldern.

Template-driven Forms

Template-driven Forms verwenden die ngModel-Direktive, um die Datenbindung zu verwalten, und konzentrieren sich auf die Definition der Formularelemente im HTML-Template.

Ein einfaches Beispiel für ein Template-driven Formular

Um mit Template-driven Forms zu arbeiten, musst du zunächst das Modul `FormsModule` in dein Angular-Projekt importieren:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

HTML-Template:

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" [(ngModel)]="user.name" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" [(ngModel)]="user.email" required>
  <button type="submit" [disabled]="userForm.invalid">Absenden</button>
</form>

In diesem Formular:

– Die `[(ngModel)]`-Syntax wird verwendet, um die Zweiweg-Datenbindung zu implementieren, wodurch die Formulardaten mit der Komponente synchronisiert werden.

– Die Formularvalidierung erfolgt automatisch über HTML-Attribute wie `required` und `type=“email“`.

– Die `#userForm=“ngForm“`-Syntax weist Angular an, das Formular unter dem Namen `userForm` zu referenzieren, um auf den Formularstatus zuzugreifen (wie z. B. ob es gültig oder ungültig ist).

TypeScript-Komponente:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  user = {
    name: '',
    email: ''
  };
  onSubmit(form: any) {
    console.log('Formulardaten:', form.value);
  }
}

Hier haben wir eine einfache Logik, die das Formular übergibt und die Eingabedaten in der Konsole ausgibt. Der Formularstatus (wie `invalid` oder `touched`) wird von Angular automatisch überwacht, was eine einfache Validierung ermöglicht.

Reactive Forms

Reactive Forms geben dir mehr Kontrolle und Flexibilität, da sie vollständig im TypeScript-Code definiert werden. Sie basieren auf einem expliziten Formularmodell, das mithilfe der Angular-Form-API erstellt wird.

Ein einfaches Beispiel für ein Reactive Form

Um Reactive Forms zu verwenden, musst du das `ReactiveFormsModule` in dein Modul importieren:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {}

TypeScript-Komponente:

In Reactive Forms wird das Formularmodell im TypeScript-Code definiert:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  userForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log('Formulardaten:', this.userForm.value);
    }
  }
}

In diesem Beispiel verwenden wir den `FormBuilder`-Service, um ein reaktives Formular zu erstellen. Die Felder `name` und `email` sind mit Validierungsregeln versehen, wie `Validators.required` und `Validators.email`.

HTML-Template:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input id="name" formControlName="name">
  <div *ngIf="userForm.get('name').invalid && userForm.get('name').touched">
    Name ist erforderlich
  </div>

  <label for="email">Email:</label>
  <input id="email" formControlName="email">
  <div *ngIf="userForm.get('email').invalid && userForm.get('email').touched">
    Bitte geben Sie eine gültige E-Mail-Adresse ein
  </div>
  <button type="submit" [disabled]="userForm.invalid">Absenden</button>
</form>

– `[formGroup]`: Verknüpft das Template mit dem im TypeScript definierten Formularmodell.

– `formControlName`: Verknüpft die Eingabefelder mit den Formularsteuerelementen (`name` und `email`).

– Die Validierungsnachrichten werden basierend auf dem Status der jeweiligen Formularfelder angezeigt.

Formularvalidierung

Sowohl Template-driven als auch Reactive Forms unterstützen eingebaute und benutzerdefinierte Validierungen.

Eingebaute Validatoren:

Eingebaute Validatoren können sowohl in Template-driven als auch in Reactive Forms verwendet werden:

– required: Stellt sicher, dass ein Feld ausgefüllt wird.

– email: Prüft, ob die Eingabe eine gültige E-Mail-Adresse ist.

– minlength / maxlength: Prüft, ob die Eingabe eine Mindest- oder Höchstlänge hat.

Benutzerdefinierte Validatoren:

In Reactive Forms kannst du benutzerdefinierte Validatoren erstellen, um komplexe Validierungsregeln zu implementieren. Hier ein einfaches Beispiel:

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function forbiddenNameValidator(control: AbstractControl): ValidationErrors | null {
  const forbidden = /admin/.test(control.value);
  return forbidden ? { forbiddenName: { value: control.value } } : null;
}

Dieser Validator verhindert, dass der Name „admin“ verwendet wird. Du kannst ihn dann auf ein Formularsteuerelement anwenden:

this.userForm = this.fb.group({
  name: ['', [Validators.required, forbiddenNameValidator]],
  email: ['', [Validators.required, Validators.email]]
});

Fazit

Formulare sind ein unverzichtbarer Bestandteil vieler Webanwendungen, und Angular bietet zwei leistungsstarke Ansätze, um sie zu verwalten: template-driven Forms für einfache Szenarien und reactive Forms für komplexere Anforderungen. Beide Methoden bieten robuste Möglichkeiten zur Formularvalidierung und -verwaltung, sodass du eine flexible und benutzerfreundliche Lösung für deine Formulare entwickeln kannst.