Webinar: Angular Forms in der Praxis: Statisch, dynamisch, typed

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 hochdynamisch sind Forms in allen Ausprägungen in einer Web-App anzutreffen. Wie ist es also möglich, 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. Es werden die Vor- und Nachteile der neuen Typed-API diskutiert und bewertet. Sehen Sie, welche Abstraktionsebenen Angular’s Form Controls System bietet und wie der Router sowie die Dependency Injection (DI) genutzt werden können, um hochkomplexe Forms zu zerlegen und zu vereinfachen

Transcript

1. Angular Forms in der Praxis: Statisch, dynamisch, typed Webinar Max Marschall @MaxOSchulte Engineer / Consultant
2. Webinar Marschall Angular Forms in der Praxis: Statisch, dynamisch, typed
3. What to expect § Angular-Form nesting concepts § Angular API integration (Routing, DI) § Architectural concepts for forms § Demo / Live coding And what not § Persis@ng § API Management § Deep-dive typing § Complete stepper guide Webinar Angular Forms in der Praxis: Sta:sch, dynamisch, typed L
4. Webinar Angular Forms in der Praxis: Sta:sch, dynamisch, typed
5. Form Control “Tracks the value and validation status of an individual form control.” Angular’s form approach in a nutshell Webinar Angular Forms in der Praxis: Sta:sch, dynamisch, typed P Form Control (Inputs, etc.)
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 Webinar Angular Forms in der Praxis: Sta:sch, dynamisch, typed Form Control (Inputs, Components)
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? Webinar Angular Forms in der Praxis: Sta:sch, dynamisch, typed Form Control (Inputs, Components) Control Container (Groupes, Arrays, Reactive Forms, Template Driven) Form Control (Inputs, Components) …
8. Template driven and reac7ve forms h"ps://angular.io/guide/forms-overview Webinar Angular Forms in der Praxis: Sta:sch, dynamisch, typed
9. Typed Reactive Forms changes § All controls are typed § Untyped Prefix for legacy forms § UntypedFormControl § UntypedFormGroup § UntypedFormArray § … § Inferred type from definition § Or explicit on definition Angular’s Reac7ve Forms > Ng 14 Webinar Angular Forms in der Praxis: Sta:sch, dynamisch, typed
10. Typed Reac<ve Forms § NgForm / FormGroup / FormArray § + FormRecord § (Old) FormBuilder ➡ UntypedFormBuilder (Untyped) § FormBuilder (Typed) § NonNullableFormBuilder (Typed) § Resets to ini@al value Angular’s Reac7ve Forms > Ng 14 Control Container (Groupes, Arrays, Reactive Forms, Template Driven) … Webinar Angular Forms in der Praxis: Statisch, dynamisch, typed Form Control (Inputs, Components) Form Control (Inputs, Components)
11. Typed Reactive Forms Angular’s Reactive Forms > Ng 14 Webinar Angular Forms in der Praxis: Statisch, dynamisch, typed h@ps://angular.io/guide/typed-forms#formrecord
12. Requirements Max’s forms solu7on matrix § Dynamic § Extendable § Reusable § 0-N array objects § Validatable § My summary ✅ ✅ foundation ✅ ✅ ✅ “easy” ✅ ✅ ✅ ✅ ✅ “hard” Event-driven CVA Template driven Reac3ve Webinar Angular Forms in der Praxis: Sta:sch, dynamisch, typed + Cross validation + Dependency injection 1
13. LIVE CODING Webinar Angular Forms in der Praxis: Sta:sch, dynamisch, typed
14. Dependency injec9on § Loose connec@on § Provide config or extend § Forms across rou@ng Recommended concepts Webinar Angular Forms in der Praxis: Statisch, dynamisch, typed Validation § Constraints § Cross-Field dependencies § Group validation
15. Recap Form Control (Inputs, Components) Control Container (Groupes, Arrays, ReacIve Forms, Template Driven) Form Control (Inputs, Components) … Webinar Angular Forms in der Praxis: Sta:sch, dynamisch, typed CONTAINER A
16. Recap Webinar Angular Forms in der Praxis: Sta:sch, dynamisch, typed 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
17. Control Container Recap § Dependency injec@on § Cross valdia@on Webinar Angular Forms in der Praxis: Statisch, dynamisch, typed Form Control (Inputs, Components) Control Container (Groupes, Arrays, ReacIve 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
18. https://www.thinktecture.com/de/max-schulte Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank