🧩 Angular Multi-Step Forms – Stepper, Dynamic Flow & State Handling

Mehrschritt-Formulare sind oft das Herzstück komplexer Prozesse: Onboarding, Konfiguration, Buchung, etc.
In diesem Beitrag lernst du, wie du cleane, dynamische und UX-freundliche Stepper baust – mit Angular & Signals.

🧱 1. Struktur & State-Handling

Nutze ein zentrales Signal für den Schritt:

readonly step = signal(0);

nextStep() { this.step.update((s) => s + 1); }
prevStep() { this.step.update((s) => s - 1); }

Optional: Step-State als Enum + SignalStore

🧩 2. Stepper-Komponente

<ng-container [ngSwitch]="step()">
  <app-step-personal *ngSwitchCase="0" />
  <app-step-details *ngSwitchCase="1" />
  <app-step-confirm *ngSwitchCase="2" />
</ng-container>

➡ Jeder Step ist eine eigene, standalone-komponente

📦 3. Form-State zentral halten

readonly formData = signal<FormData>({
  name: '',
  email: '',
  address: '',
});

➡ Übergib @Input() in jedem Step, update mit (ngModelChange)

🔁 4. Dynamische Steps (abhängig vom Inhalt)

readonly hasCompany = signal(false);

readonly steps = computed(() => {
  return hasCompany() ? ['personal', 'company', 'confirm'] : ['personal', 'confirm'];
});

➡ Dynamischer Flow mit klarer Logik

🧪 5. Validierung & Progress

• Jeder Step validiert nur sich selbst
• Globaler Fortschritt z. B. mit step() / steps().length
• Fehler mit ngIf, aria-live und Step-Markers anzeigen

🧠 6. UX Best Practices

• Autofokus auf erstes Feld
• Zurück-Buttons immer sichtbar
• Zwischenspeichern lokal (localStorage, Signals)
• Fortschrittsbalken oben
• Confirmation Step mit Review der Eingaben

✅ Fazit

Multi-Step Forms in Angular:

• 💡 Klarer UX-Flow
• 📦 Zentraler Form- und Step-State
• 🧱 Komponentisiert & wiederverwendbar
• 🔁 Dynamisch & testbar

📍 Bald im Blog: ⚡ Signals + RxJS – Best of both worlds für reactive Power