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

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

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.

Max Schulte

May 26, 2023
Tweet

More Decks by Max Schulte

Other Decks in Programming

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