Signal Forms: Wie Angular Formulare neu definiert

Angular Forms waren lange Zeit entweder reaktiv oder template-getrieben – aber nie wirklich signal-basiert. Mit der neuen Signal Forms API schließt Angular genau diese Lücke und rückt Formulare näher an das reaktive Herz des Frameworks.

In diesem Workshop werfen wir zunächst einen Blick auf die bestehenden Forms-APIs und ihre typischen Herausforderungen im Zusammenspiel mit Signals. Anschließend tauchen wir tief in die Signal Forms API ein, migrieren Schritt für Schritt bestehende Template-Driven und Reactive Forms und zeigen, wie sich dynamische, datengetriebene Formulare elegant umsetzen lassen.

Zum Abschluss betrachten wir, wie sich Signal Forms sinnvoll mit modernen State-Management-Ansätzen wie dem Signal Store verknüpfen lassen, um klar strukturierte, wartbare und zukunftsfähige Formulararchitekturen zu bauen.

Warum funktionieren bisherige Forms nicht so recht mit Signals?
Die neue Signal Forms API was kann sie?
Wie migriere ich Template-Driven und Reaktive Forms?
Wie baue ich dynamische Formulare mit dem neuen Ansatz?
Wie verbinde ich Signal Forms effektiv mit meinem reaktiven State aus dem Signal Store?

Transcript

1. Signal Forms Wie Angular Formulare neu definiert Sascha Lehmann @derLehmann_S Consultant
2. Consultant @ Thinktecture AG Signal Forms Wie Angular Formulare neu definiert Sascha Lehmann @derLehmann_S https://www.linkedin.com/in/sascha-lehmann sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/    
3. ▸ Bisherige Forms APIs – Reactive & Template-Driven ▸ Probleme mit Signals-Integration ▸ Vorstellung Signal Forms API ▸ Übung 1: Template → Signal Forms (20 min) ▸ Übung 2: Reactive Form → Signal Forms (15 min, Teilmigration) ▸ Übung 3: Bedingte Validierung (10 min) 30 min Kaffeepause Agenda – Block 1 (90min) Signal Forms Wie Angular Formulare neu definiert
4. ▸ Übung 4: Async Validierung (Demo + 10 min) ▸ Übung 5: Signal Store Integration (15 min) ▸ Übung 6: Dynamische JSON Forms (10 min) ▸ Best Practices & Zusammenfassung Agenda – Block 2 (90min) Signal Forms Wie Angular Formulare neu definiert
5. https://github.com/thinktecture/angular-days-signal-forms-workshop Repo Signal Forms Wie Angular Formulare neu definiert
6. • Direktiven: ngModel, ngModelGroup, ngForm • State wird vom Template ins Framework geschrieben • Fokus: Einfacher Einstieg, weniger Boilerplate • Zugriff via Template-Referenzen: #myForm="ngForm" Template-Driven Forms – Kurz-Recap Signal Forms Wie Angular Formulare neu definiert
7. Template-Driven – Code-Beispiel Signal Forms Wie Angular Formulare neu definiert
8. API: FormControl, FormGroup, FormArray, FormBuilder State als objektorientiertes Baum-Modell Reaktivität via RxJS: valueChanges, statusChanges Stärken: Typisierung, Testbarkeit, dynamische Formulare Reactive Forms – Kurz-Recap Signal Forms Wie Angular Formulare neu definiert
9. Reactive Forms – Code-Beispiel Signal Forms Wie Angular Formulare neu definiert
10. Probleme mit Signals? Signal Forms Wie Angular Formulare neu definiert
11. Component State Signals: signal(), computed(), effect() Forms State RxJS: valueChanges, statusChanges, Observable → Unterschiedliche mentale Modelle, manuelles Bridging nötig Problem 1: Zwei Welten Signal Forms Wie Angular Formulare neu definiert
12. Problem 2: Manuelles Bridging Signal Forms Wie Angular Formulare neu definiert
13. 1. Strukturelle Änderungen unsichtbar push() / removeAt() triggern keine Signal-Updates → UI reagiert nicht 2. Referenz bleibt gleich FormArray-Objekt wird mutiert, aber Signal erkennt keine Änderung 3. Manuelle Workarounds nötig Custom Equality-Checks oder explizite Signal-Updates erforderlich Problem 3: FormArray + Signals Signal Forms Wie Angular Formulare neu definiert
14. • valueChanges emittiert für die ganze FormGroup • Keine automatische Reaktion auf einzelne Feld-Status • Aufwendiges selektives Subscribing nötig Problem 4: Feingranulare Reaktivität fehlt Signal Forms Wie Angular Formulare neu definiert
15. Signal Forms API Signal Forms Wie Angular Formulare neu definiert
16. • Daten-Signal als Single Source of Truth • form(<modelSignal>) erzeugt FieldTree • FieldTree spiegelt Datenstruktur 1:1 • Jedes Feld bietet Signals für Wert und Status Grundprinzip: Model-First Signal Forms Wie Angular Formulare neu definiert
17. Signal Forms – Konzept im Überblick signal() email: '' password: '' Model Signal form() Transformation loginForm .email → FieldState .password → FieldState FieldTree Template <input [formField]= "loginForm.email" /> <input [formField]= "loginForm.password" /> Template Binding Signal Forms Wie Angular Formulare neu definiert
18. Signal Forms – Minimales Beispiel Signal Forms Wie Angular Formulare neu definiert
19. value() – Aktueller Wert valid() / invalid() – Validierungsstatus touched() / dirty() – User-Interaktion pending() – Async-Validierung läuft errors() – Array von Validation Errors FieldState – Verfügbare Signals Signal Forms Wie Angular Formulare neu definiert
20. • Vollständige Kontrolle über Datenmodell • Deklarative Validierung via Schema • Struktur-Mapping: Datenstruktur = Feldstruktur • Kein ControlValueAccessor-Boilerplate mehr Warum „neu definiert“? Signal Forms Wie Angular Formulare neu definiert
21. Beispielanwendung animieren HANDS-ON
22. Validierung Signal Forms Wie Angular Formulare neu definiert
23. Grundstruktur Signal Forms Wie Angular Formulare neu definiert
24. • path spiegelt die Modell-Struktur wider • Typsicher: path.email, path.password • Läuft nur einmal beim Setup, nicht bei jedem Wert-Change • Registriert Regeln für bestimmte Pfade Die Schema-Funktion Signal Forms Wie Angular Formulare neu definiert
25. Built-in Validators Signal Forms Wie Angular Formulare neu definiert
26. Custom Error Messages Signal Forms Wie Angular Formulare neu definiert
27. Custom Validators Signal Forms Wie Angular Formulare neu definiert
28. Debouncing Signal Forms Wie Angular Formulare neu definiert
29. Beispielanwendung animieren HANDS-ON
30. Bedingte Validierung Signal Forms Wie Angular Formulare neu definiert
31. Cross-Field Validierung Signal Forms Wie Angular Formulare neu definiert
32. Async/HTTP Validierung Signal Forms Wie Angular Formulare neu definiert
33. Beispielanwendung animieren HANDS-ON
34. Umgang mit verschachtelten Objekten Signal Forms Wie Angular Formulare neu definiert
35. Umgang mit verschachtelten Objekten Signal Forms Wie Angular Formulare neu definiert
36. Schema-Wiederverwendung Signal Forms Wie Angular Formulare neu definiert
37. Schemas zusammenführen Signal Forms Wie Angular Formulare neu definiert
38. Sauberes Endresultat Signal Forms Wie Angular Formulare neu definiert
39. Form Arrays – Bisheriger Ansatz Signal Forms Wie Angular Formulare neu definiert
40. Form Arrays (dynamische Listen) Signal Forms Wie Angular Formulare neu definiert
41. • Keine push() oder removeAt() mehr • Arrays im Model-Signal verwalten • Spread-Operator für neue Arrays: [...items, newItem] • filter() zum Entfernen von Items Goodbye FormArray Signal Forms Wie Angular Formulare neu definiert
42. Fehleranzeige im Template Signal Forms Wie Angular Formulare neu definiert
43. Zod/JSON Schema Integration Signal Forms Wie Angular Formulare neu definiert
44. Bedingte Felder Signal Forms Wie Angular Formulare neu definiert
45. Bedingte Felder Signal Forms Wie Angular Formulare neu definiert
46. • Schemas in separate Dateien auslagern • Sub-Schemas für Wiederverwendbarkeit erstellen • Custom Error Messages für bessere UX • Typsichere Schema-Funktionen nutzen Best Practices Signal Forms Wie Angular Formulare neu definiert
47. Custom Form Components Signal Forms Wie Angular Formulare neu definiert
48. Custom Form Components - Bisher Signal Forms Wie Angular Formulare neu definiert
49. Custom Form Components – Neuer Weg Signal Forms Wie Angular Formulare neu definiert
50. Custom Form Components – Checkbox Controls Signal Forms Wie Angular Formulare neu definiert
51. Lightweight Reactive State Management • Standalone Library • Signal Based • Functional Based • Extendable • Rxjs compatible • Helper Functions • SignalState • DeepComputed • SignalMethod • rxMethod NgRx Signal Store
52. Installation
53. • signalStore • withState • withComputed • withMethods • withProps • withHooks • withEntities • signalStoreFeature Signal Store Methods
54. Define the Store
55. Use the Store
56. • Store lädt initiale Daten (z.B. User-Details) • Model-Signal wird aus Store initialisiert • linkedSignal() verwaltet UI-State • Submit schreibt zurück in Store Pattern A: Store liefert Daten Signal Forms Wie Angular Formulare neu definiert
57. Pattern A – Code Signal Forms Wie Angular Formulare neu definiert
58. JSON definiert Felder + Validierung Form wird automatisch generiert Eure Aufgabe: Ein Feld im JSON ergänzen Ziel: "Aha"-Effekt erleben Forms over Data Signal Forms Wie Angular Formulare neu definiert
59. Model-Signal als Single Source of Truth Immutable Updates mit Spread-Operator Schema-basierte Validierung bevorzugen Schemas wiederverwenden und komponieren Best Practices Signal Forms Wie Angular Formulare neu definiert
60. Signal Forms Neue Projekte, Signal-basierte Apps Reactive Forms Legacy, komplexe async Logik Wann welche API nutzen? Signal Forms Wie Angular Formulare neu definiert
61. • Signal Forms: Model-First mit automatischer Reaktivität • Weniger Boilerplate als Reactive Forms • Schema-basierte Validierung (sync + async) • Perfekt für OnPush + Zoneless • Dokumentation: angular.dev/guide/forms/signals Zusammenfassung Signal Forms Wie Angular Formulare neu definiert
62. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön!