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
   

   View Slide

2. Webinar
   Marschall
   Angular Forms in der Praxis: Statisch, dynamisch, typed
   

   View Slide

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
   

   View Slide

4. Webinar
   Angular Forms in der Praxis: Sta:sch, dynamisch, typed
   

   View Slide

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.)
   

   View Slide

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)
   

   View Slide

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)
   …
   

   View Slide

8. Template driven and reac7ve forms
   h"ps://angular.io/guide/forms-overview
   Webinar
   Angular Forms in der Praxis: Sta:sch, dynamisch, typed
   

   View Slide

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
   

   View Slide

10. Typed Reac§ 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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. LIVE CODING
    Webinar
    Angular Forms in der Praxis: Sta:sch, dynamisch, typed
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. https://www.thinktecture.com/de/max-schulte
    Max Schulte
    @MaxOSchulte
    Engineer / Consultant
    Vielen Dank
    

    View Slide