Komplexe und dynamische Formulare mit Angular

Eingabeformulare (kurz Forms) finden sich in jeder Web-App. Angefangen mit einer übersichtlichen Login-UI bis hin zu Seiten übergreifenden Steppern. Von einfach bis sehr komplex und hoch dynamisch sind Forms in allen Ausprägungen in einer Web-App anzutreffen. Wie ist es also möglich eine komplexe Formulare selbst zu erstellen, und was muss dazu alles beachtet werden? Einfach Eingabefelder reichen schnell nicht mehr aus, so zum Beispiel, wenn eine Feldübergreifende Validierung ausgeführt werden soll oder eine Form aus mehreren abhängigen Gruppen besteht. Wie werden Felder oder Gruppen asynchron validiert?

In diesem Webinar zeigt Max Schulte wie Angular es ermöglicht, komplexe und dynamische Formulare zu erstellen. Sehen Sie welche Abstraktionsebenen Angular’s Form Controls System bietet und wie der Router sowie die Dependency Injection (DI) genutzt werden können, um hoch komplexe Forms zu zerlegen und zu vereinfachen.

Transcript

1. Komplexe und dynamische Formulare mit Angular Webinar Max Schulte @MaxOSchulte Engineer / Consultant
2. Komplexe und dynamische Formulare mit Angular Webinar
3. What to expect § Form nesting concepts § Angular API integration (Routing, DI) § Architecture § Demo § Live coding And what not § Persisting § API Management § Deep-dive typing § Complete stepper guide Webinar Komplexe und dynamische Formulare mit Angular
4. Webinar Komplexe und dynamische Formulare mit Angular
5. Form Control “Tracks the value and validation status of an individual form control.” Angular’s form approach in a nutshell Form Control (Inputs, etc.) Webinar Komplexe und dynamische Formulare mit Angular
6. Control Value Accessor (CVA) “A base class that all FormControl-based directives extend. It binds a FormControl object to a DOM element.” Angular’s form approach in a nutshell CVA Form Control (Inputs, Components) Webinar Komplexe und dynamische Formulare mit Angular
7. Control Container “A base class for directives that contain multiple registered instances of NgControl. Only used by the forms module.” § NgForm / FormGroup / FormArray Angular’s form approach in a nutshell Sub Form? Form Control (Inputs, Components) Control Container (Groupes, Arrays, Reactive Forms, Template Driven) Form Control (Inputs, Components) … Webinar Komplexe und dynamische Formulare mit Angular
8. Template driven and reactive forms https://angular.io/guide/forms-overview Webinar Komplexe und dynamische Formulare mit Angular
9. Requirements Max’s forms solution matrix § Dynamic § Extendable § Reusable § 0-N array objects § Validatable § My summary ✅ ✅ foundation ✅ ✅ ✅ “easy” ✅ ✅ ✅ ✅ ✅ “hard” Event-driven CVA Template driven Reactive Webinar Komplexe und dynamische Formulare mit Angular + C ross-Validation + Dependency Injection
10. CODE Webinar Komplexe und dynamische Formulare mit Angular
11. § Loose connection § Provide config or extend § Forms across routing Dependency Injection Webinar Komplexe und dynamische Formulare mit Angular
12. § Constraints § Cross-Field dependencies § Group validation Cross-Validation Webinar Komplexe und dynamische Formulare mit Angular
13. Recap Form Control (Inputs, Components) Control Container (Groupes, Arrays, Reactive Forms, Template Driven) Form Control (Inputs, Components) … Webinar Komplexe und dynamische Formulare mit Angular CONTAINER A
14. Recap Webinar Komplexe und dynamische Formulare mit Angular Form Control (Inputs, Components) Control Container (Groupes, Arrays, Reactive Forms, Template Driven) Form Control (Inputs, Components) … CONTAINER A Form Control (Inputs, Components) Control Container (Groupes, Arrays, Reactive Forms, Template Driven) Form Control (Inputs, Components) … CONTAINER B
15. Control Container Recap § Dependency injection § Cross valdiation Webinar Komplexe und dynamische Formulare mit Angular Form Control (Inputs, Components) Control Container (Groupes, Arrays, Reactive Forms, Template Driven) Form Control (Inputs, Components) … CONTAINER A Form Control (Inputs, Components) Control Container (Groupes, Arrays, Reactive Forms, Template Driven) Form Control (Inputs, Components) … CONTAINER B
16. https://www.thinktecture.com/de/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank