Angular-Formular

Formulare lassen Benutzer viele Daten bequem bearbeiten. Angular bietet dafür zwei Module: Template-driven Forms mit [(ngModel)] und Reactive Forms mit FormBuilder, Validatoren und Strömen der Wertänderungen. Seit Angular 22 kommen stabile Signal Forms dazu.

Code-Beispiele aus Quelle - Angular Mastery Workshop (Folie 316–323), von den Folienbildern abgeschrieben (Stand Angular 12).

Zwei Module

• FormsModule: Template-driven Forms. Die Direktive [(ngModel)] bindet in beide Richtungen.
• ReactiveFormsModule: modernere, reaktive und deklarative Formulare mit FormBuilder und RxJS-Strömen, die gut mit anderen Strömen zusammenspielen.

(Folie 317)

Template-driven

[(ngModel)] bindet das Feld in beide Richtungen an customer.name (Folie 318):

<input type="text" id="name" required [(ngModel)]="customer.name" name="name" />

Reactive Forms

Das Formular wird im Code mit dem FormBuilder definiert, samt Validatoren. Im Template verbindet formControlName jedes Eingabefeld mit dem Formular. Die Wertänderungen gibt es als RxJS-Strom (Folie 319):

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

@Component({
  selector: 'my-org-customer-editor',
  template: `
    <form [formGroup]="customerForm">
      <input placeholder="Name" formControlName="name" />
      <input placeholder="Surname" formControlName="surname" />
    </form>
  `
})
export class CustomerEditorComponent implements OnInit {

  customerForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {

    this.customerForm = this.fb.group({
      name: ['', [Validators.required]],
      surname: ['', [Validators.required]],
      birthday: ['', [Validators.required]]
    });

    this.customerForm.valueChanges.pipe(
      // ... in eigenen Strömen weiterverwenden
    );
  }
}

Deklarative Definition mit verschachtelter Gruppe. Jede Eigenschaft hat einen Standardwert und ein Array von Validatoren (Folie 320):

this.customerForm = this.fb.group({
  name: ['', [Validators.required]],
  surname: ['', [Validators.required]],
  birthday: ['', [Validators.required]],
  isVip: [false],
  address: this.fb.group({                                           // verschachtelte Gruppe
    location: ['', [Validators.required]],
    land: ['', [Validators.required]],
    continent: ['', [Validators.required, Validators.minLength(3)]],
  }),
  tags: [[]],
});

Werte aus dem Code setzen, z.B. nach dem Laden vom Backend (Folie 321):

ngOnInit() {
  this.customerForm = this.fb.group({
    // ...
  });

  const customer = { /* ... */ };   // get customer somehow (backend, ...)
  this.customerForm.patchValue({ ...customer });
}

Fehlermeldungen im Template, allgemein oder pro Validator mit Daten aus dem Fehler, hier mit Angular Material (Folie 322):

<mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput formControlName="name" />

    <mat-error>Please, provide name</mat-error>              <!-- allgemeiner Fehler -->
</mat-form-field>

<div formGroupName="address">                                <!-- verschachtelte Gruppe -->

    <mat-form-field>
        <mat-label>Continent</mat-label>
        <input matInput formControlName="continent" />       <!-- address.continent -->

        <mat-error *ngIf="customerForm.get('address.continent').hasError('required')">
          Please, provide continent
        </mat-error>
        <mat-error *ngIf="customerForm.get('address.continent').hasError('minlength')">
          Minimum length is
          {{ customerForm.get('address.continent').errors['minlength'].requiredLength }},
          please provide longer value
        </mat-error>
    </mat-form-field>

</div>

Absenden nur, wenn gültig. Sonst alle Felder als berührt markieren, damit alle Fehlermeldungen erscheinen (Folie 323):

@Component({ /* ... */ })
export class CustomerEditorComponent implements OnInit {

    // ...

    submit(customer: Customer) {
        if (!this.customerForm.valid) {
            this.customerForm.markAllAsTouched();
            return;
        }

        // submit logic
    }
}

Gestaltung aus UX-Sicht

Die Validatoren liefern die Technik für die Inline-Validierung, die das Quelle - Praxisbuch Usability und UX empfiehlt: Rückmeldung schon beim Verlassen eines Feldes, die Fehlermeldung direkt beim Feld, rot markiert, mit konkretem Korrekturhinweis und ohne bereits eingegebene Daten zu löschen. Bei Standardangaben wie dem Vornamen verwirrt sie eher. Details zu Labels, Pflichtfeldern und Buttons: Formulargestaltung.

Verwandt

• Angular – Überblick
• Angular-Komponente – Template-Syntax, *ngIf, Bindings
• RxJS – valueChanges als Strom
• Reaktive Programmierung – Signals als neue Grundlage
• Formulargestaltung – wie Formulare für Nutzer gestaltet sein sollten