Webinar: Web-Apps mit Angular: was Sie über Formulare wissen müssen

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 und dem dritten Teil unsere Reihe zu Web-Apps 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. Web-Apps mit Angular Was Sie über Formulare wissen müssen Webinar Max Marschall @MaxOSchulte Engineer / Consultant
2. Marschall Web-Apps mit Angular: was Sie über Formulare wissen müssen Webinar
3. What to expect § Angular-Form concepts § Angular-Form nesting § Angular API integration (Routing, DI) § Architectural concepts for forms § Demo / Live coding And what not § Persisting § API Management § Deep-dive typing § Complete stepper guide Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen L
4. Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen
5. Form Control “Tracks the value and validation status of an individual form control.” Angular’s form approach in a nutshell Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen 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 Web-Apps mit Angular: was Sie über Formulare wissen müssen 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 / FormRecord Angular’s form approach in a nutshell Sub Form? Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen Form Control (Inputs, Components) Control Container (Groupes, Arrays, Reactive Forms, Template Driven) Form Control (Inputs, Components) …
8. Template driven and reactive forms https://angular.io/guide/forms-overview Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen
9. § Validation directives § [(ngModel)] Two-Way Binding § Submit & events on interaction § Mutable § Automatic model creation Template Driven Forms Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen
10. Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen SOURCE CODE
11. Reactive Forms Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen § Event-Driven § Immutable § Reactive Pattern § BYOM – Bring Your Own Model
12. 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 Reactive Forms > Ng 14 Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen
13. Typed Reactive Forms § NgForm / FormGroup / FormArray § + FormRecord § (Old) FormBuilder ➡ UntypedFormBuilder (Untyped) § FormBuilder (Typed) § NonNullableFormBuilder (Typed) § Resets to initial value Angular’s Reactive Forms > Ng 14 Control Container (Groupes, Arrays, Reactive Forms, Template Driven) … Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen Form Control (Inputs, Components) Form Control (Inputs, Components)
14. Typed Reactive Forms Angular’s Reactive Forms > Ng 14 Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen https://angular.io/guide/typed-forms#formrecord
15. 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 Web-Apps mit Angular: was Sie über Formulare wissen müssen + C ross validation + Dependency injection 1
16. SOURCE CODE Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen
17. Dependency injection § Loose connection § Provide config or extend § Forms across routing Recommended concepts Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen Validation § Constraints § Cross-Field dependencies § Group validation
18. Recap Form Control (Inputs, Components) Control Container (Groupes, Arrays, Reactive Forms, Template Driven) Form Control (Inputs, Components) … Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen CONTAINER A
19. Recap Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen 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
20. Control Container Recap § Dependency injection § Cross valdiation Webinar Web-Apps mit Angular: was Sie über Formulare wissen müssen 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
21. https://www.thinktecture.com/de/max-marschall Max Marschall @MaxOSchulte Engineer / Consultant Vielen Dank