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
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   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
   Web-Apps mit Angular: was Sie über Formulare wissen müssen
   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 / 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)
   …
   

   View Slide

8. Template driven and reactive forms
   https://angular.io/guide/forms-overview
   Webinar
   Web-Apps mit Angular: was Sie über Formulare wissen müssen
   

   View Slide

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
   

   View Slide

10. Webinar
    Web-Apps mit Angular: was Sie über Formulare wissen müssen
    SOURCE CODE
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. SOURCE CODE
    Webinar
    Web-Apps mit Angular: was Sie über Formulare wissen müssen
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

21. https://www.thinktecture.com/de/max-marschall
    Max Marschall
    @MaxOSchulte
    Engineer / Consultant
    Vielen Dank
    

    View Slide