Angular Forms in der Praxis: Statisch, dynamisch, typed Webinar Max Marschall @MaxOSchulte Engineer / Consultant

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

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

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

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

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)

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

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

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

Typed Reac 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)

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

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

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

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

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

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

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

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