Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Solve Complex and Dynamic Forms with Angular

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.

Max Schulte

October 27, 2022
Tweet

More Decks by Max Schulte

Other Decks in Programming

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