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.

Transcript

1. Solve Complex and Dynamic Forms with Angular Session Max Marschall @MaxOSchulte Engineer / Consultant
2. Session Marschall Solve Complex and Dynamic Forms with Angular
3. Session Solve Complex and Dynamic Forms with Angular
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.)
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)
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) …
7. Template driven and reactive forms https://angular.io/guide/forms-overview Session Solve Complex and Dynamic Forms with Angular
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
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)
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
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
12. LIVE CODING Session Solve Complex and Dynamic Forms with Angular
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
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
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
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
17. https://www.thinktecture.com/de/max-marschall Max Schulte @MaxOSchulte Engineer / Consultant Vielen Dank