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

Session Marschall Solve Complex and Dynamic Forms with Angular

Session Solve Complex and Dynamic Forms with Angular

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

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)

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

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

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

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)

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

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

LIVE CODING Session Solve Complex and Dynamic Forms with Angular

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

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

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

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

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