Slide 1
Slide 1 text
Web-Apps mit Angular
Was Sie über Formulare wissen müssen
Webinar
Max Marschall
@MaxOSchulte
Engineer / Consultant
Slide 2
Slide 2 text
Marschall
Web-Apps mit Angular: was Sie über Formulare wissen müssen
Webinar
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Webinar
Web-Apps mit Angular: was Sie über Formulare wissen müssen
Slide 5
Slide 5 text
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.)
Slide 6
Slide 6 text
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)
Slide 7
Slide 7 text
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)
…
Slide 8
Slide 8 text
Template driven and reactive forms
https://angular.io/guide/forms-overview
Webinar
Web-Apps mit Angular: was Sie über Formulare wissen müssen
Slide 9
Slide 9 text
§ 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
Slide 10
Slide 10 text
Webinar
Web-Apps mit Angular: was Sie über Formulare wissen müssen
SOURCE CODE
Slide 11
Slide 11 text
Reactive Forms
Webinar
Web-Apps mit Angular: was Sie über Formulare wissen müssen
§ Event-Driven
§ Immutable
§ Reactive Pattern
§ BYOM – Bring Your Own Model
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
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)
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
SOURCE CODE
Webinar
Web-Apps mit Angular: was Sie über Formulare wissen müssen
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
https://www.thinktecture.com/de/max-marschall
Max Marschall
@MaxOSchulte
Engineer / Consultant
Vielen Dank