Solve Complex and Dynamic Forms with Angular

Input forms (or just forms) are present in every web app. Started by a login UI, leading to steppers that span multiple pages, from simple to highly complex and dynamic, forms can be found in all kinds of web apps. So how can you create a complex form yourself, and what do you have to consider? What do you do if simple input fields are no longer sufficient? How do you handle cross-field validation or a form consisting of several dependent groups? In this session, Max Schulte shows how Angular makes it possible to create complex and dynamic forms. See what levels of abstraction Angular’s form controls system provides and how the router and dependency injection (DI) can be used to compose and ease complex forms.

Transcript

1. Solve Complex and Dynamic Forms with Angular
   Session
   Max Marschall
   @MaxOSchulte
   Engineer / Consultant
   

   View Slide

2. Session
   Marschall
   Solve Complex and Dynamic Forms with Angular
   

   View Slide

3. Session
   Solve Complex and Dynamic Forms with Angular
   

   View Slide

4. Form Control
   “Tracks the value and valida2on status of an
   individual form control.”
   Angular’s form approach in a nutshell
   Session
   Solve Complex and Dynamic Forms with Angular
   Form Control (Inputs, etc.)
   

   View Slide

5. 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
   Session
   Solve Complex and Dynamic Forms with Angular
   Form Control (Inputs, Components)
   

   View Slide

6. 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?
   Session
   Solve Complex and Dynamic Forms with Angular
   Form Control (Inputs, Components)
   Control Container (Groupes, Arrays, Reac:ve
   Forms, Template Driven)
   Form Control (Inputs, Components)
   …
   

   View Slide

7. Template driven and reactive forms
   https://angular.io/guide/forms-overview
   Session
   Solve Complex and Dynamic Forms with Angular
   

   View Slide

8. Typed Reactive Forms changes
   § All controls are typed
   § Untyped Prefix for legacy forms
   § UntypedFormControl
   § UntypedFormGroup
   § UntypedFormArray
   § …
   § Inferred type from definiFon
   § Or explicit on definiFon
   § MigraFon got you covered 😊
   Angular’s Reactive Forms > Ng 14
   Session
   Solve Complex and Dynamic Forms with Angular
   

   View Slide

9. Typed Reactive Forms
   § NgForm / FormGroup / FormArray
   § + FormRecord
   § (Old) FormBuilder ➡ UntypedFormBuilder (Untyped)
   § FormBuilder (Typed)
   § NonNullableFormBuilder (Typed)
   § Resets to iniFal value
   Angular’s Reac=ve Forms > Ng 14
   Control Container (Groupes, Arrays, Reactive
   Forms, Template Driven)
   …
   Session
   Solve Complex and Dynamic Forms with Angular
   Form Control (Inputs, Components)
   Form Control (Inputs, Components)
   

   View Slide

10. Typed Reactive Forms
    Angular’s Reac=ve Forms > Ng 14
    Session
    Solve Complex and Dynamic Forms with Angular
    h?ps://angular.io/guide/typed-forms#formrecord
    

    View Slide

11. Requirements
    Max’s forms solu=on matrix
    § Dynamic
    § Extendable
    § Reusable
    § 0-N array objects
    § Validatable
    § My summary
    ✅
    ✅
    foundation
    ✅
    ✅
    ✅
    “easy”
    ✅
    ✅
    ✅
    ✅
    ✅
    “hard”
    Event-driven
    CVA Template driven Reactive
    Session
    Solve Complex and Dynamic Forms with Angular
    + Cross validation
    + Dependency injection
    

    View Slide

12. LIVE CODING
    Session
    Solve Complex and Dynamic Forms with Angular
    

    View Slide

13. Dependency injec7on
    § Loose connecFon
    § Provide config or extend
    § Forms across rouFng
    Recommended concepts
    Session
    Solve Complex and Dynamic Forms with Angular
    Validation
    § Constraints
    § Cross-Field dependencies
    § Group validation
    

    View Slide

14. Recap
    Form Control (Inputs, Components)
    Control Container (Groupes, Arrays, Reactive
    Forms, Template Driven)
    Form Control (Inputs, Components)
    …
    Session
    Solve Complex and Dynamic Forms with Angular
    CONTAINER A
    

    View Slide

15. Recap
    Session
    Solve Complex and Dynamic Forms with Angular
    Form Control (Inputs, Components)
    Control Container (Groupes, Arrays, Reac:ve
    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

16. Control Container
    Recap
    § Dependency injecFon
    § Cross valdiaFon
    Session
    Solve Complex and Dynamic Forms with Angular
    Form Control (Inputs, Components)
    Control Container (Groupes, Arrays, Reac:ve
    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. https://www.thinktecture.com/de/max-marschall
    Max Schulte
    @MaxOSchulte
    Engineer / Consultant
    Vielen Dank
    

    View Slide