It’s #FrontendFriday – Angular Reactive Form über mehrere Komponenten verteilen
Es ist wieder #FrontendFriday! Vor einiger Zeit standen wir vor der Herausforderung, ein umfangreiches, reaktives und dynamisches Formular zu verwalten, das auf viele UI-Komponenten verteilt werden musste.
Unser Team setzte sich hauptsächlich aus Java-Backend-Entwicklern zusammen, die bisher wenig Erfahrung im Angular-Umfeld gesammelt hatten. So erforderte die Implementierung mehrere Versuche, da zu diesem Zeitpunkt keine guten Best-Practice-Anleitungen verfügbar waren und eine Übersicht über die verschiedenen Möglichkeiten mit ihren Vor- und Nachteilen fehlte. Erst viel später stießen wir auf Artikel von Sandro Roth, die während der Implementierung äußerst hilfreich gewesen wären.
Daher haben wir die wesentlichen Erkenntnisse aus diesen Artikeln hier zusammengefasst und hoffen, dass sie anderen bei der Implementierung eine gute Orientierung bieten werden und mühsame Fehlversuche ersparen können.
Überblick
- Control Value Accessor
(für eigene Formularfeld-Komponenten) - Child provides/emits FormGroup to parent
(saubere Trennung, aber schwierig bei Formular mit übergreifenden Validierungen / Seiteneffekten) - Parent provides FormGroup to child
(sehr einfach, aber Datenflussprinzip verletzt) - Form Service Approach
(Kompromiss für Formular mit übergreifenden Validierungen / Seiteneffekten)
(1) Control Value Accessor
Kurzbeschreibung:
|
|
| Vorteile | Nachteile |
|
|
Für Details siehe folgende Artikel:
- Handling large, typed reactive forms in Angular – Control Value Accessor
- Handling large reactive forms in Angular – Control Value Accessor
(2) Child provides/emits FormGroup to parent
Kurzbeschreibung:
|
|
| Vorteile | Nachteile |
|
|
Für Details siehe folgende Artikel:
- Handling large, typed reactive forms in Angular – Implementation
- Handling large reactive forms in Angular – Child provides FormGroup to parent (our approach)
(3) Parent provides FormGroup to child
Kurzbeschreibung:
|
|
| Vorteile | Nachteile |
|
|
Für Details siehe folgende Artikel:
- Handling large, typed reactive forms in Angular – Parent provides FormGroup to child
- Handling large reactive forms in Angular – Parent provides FormGroup to child
(4) Form Service Approach
Kurzbeschreibung:
|
|
| Vorteile | Nachteile |
|
|
Für Details siehe folgenden Artikel:
Handling large reactive forms in Angular (Sandro Roth)
Handling large, typed reactive forms in Angular (Sandro Roth)
Building complex forms with Angular Reactive Forms (Sandro Roth)
