Pride and Prejudice - Template Driven Forms

What have we always said over the years? What might be easier to retell what most of the Angular community has told us without trying it out for yourself? “Template driven forms don’t scale”, “If you have large complex forms, then you need to use reactive forms” Hand on heart - were reactive forms that simple and straightforward to use? Well, not for me. That’s why in this session I’m going to contrast Reactive Forms and Template Driven Forms and cover the following topics: - Boilerplate - Automatic validation - Asynchronous validation - Conditional form elements - Managing form states - Unidirectional data flow in forms with the help of signals The aim is to come to an honest and well-founded comparison in order to better weigh up reactive forms and template-driven forms in the future. After all, we all want to be able to use forms as effectively as possible, right?

Transcript

1. Pride and prejudice template-driven forms
3. Agenda 01 forms evolution 02 schema driven forms 03 take-aways
4. 2010 today 2016 forms evolution in Angular template-driven forms reactive forms template-driven forms
5. Why we dislike template-driven forms • fragmented setup in template and component class • templates got too big • handling a control-Array is inconvenient
6. Why we like reactive forms • more convenient way to create forms • better integrations with streams • better handling for lists of controls with FormArray<T>
7. The unknown trade-offs Template-driven forms... • have a declarative API • create FormGroup - & FormControl behind the scenes • remove FormGroup - & FormControl behind the scenes
8. template-driven forms reactive forms
9. Let’s dive into the demo
10. schema-driven forms
11. NgForm NgModel NgModelGroup valueChanges statusChanges valueChanges setErrors Component model schema (formUpdated) (formSafeSubmit) FormSchema process errors validations yield Overview
12. NgForm NgModel NgModelGroup valueChanges statusChanges FormSchema valueChanges Component model (valueChanges) Unidirectional data-flow
13. schema definition
14. Hello valibot https://valibot.dev/
15. mental model https://valibot.dev/guides/mental-model/
16. synchronous validation NgModel NgModelGroup
17. validate related fields fields to be validated condition error Where the error should be displayed target field(s)
18. asynchronous validation
19. asynchronous validation & Angular‘s IoC
20. schema parsing throw error yields result
21. infer typed model from schema { firstname: string, lastname: string, email: { email: string, verification: string }
22. schema processing
23. FormSchemaDirective
24. FormSchemaDirective
25. error notification for NgModel & NgModelGroup - reading error-Stream - Find respective error - setErrors on ngModel - *required name (DX)
26. display form errors automatically
27. There is one more thing
28. runtime-check to improve DX The schema is telling if we mistakenly add controls or made a typo in the name-attribute. So we can add a runtime-check.
29. schema handling
30. split form in reusable parts - still messy tepmplates? - …
31. split form in reusable parts - still messy tepmplates? - …
32. split form in reusable parts - choose yourelf Split you form in smaller chunks.
33. split form in reusable parts - connect to Parent NgForm - reuse inferred model-type
34. no FormArray but Records instead { ‘2528-2342-32’: null, ‘9643-8432-65’: 0, ‘5697-8875-18’: 1, } amount productId
35. no FormArray but Records instead Record<string, T> out, or use schema transformations Array<T> in
36. take-aways - We might have underestimated template-driven forms - cleaner code through the introductions of schemas - type-safety, because of valibot - typo-safety, because of runtime-checks
37. https://github.com/GregOnNet/talk-angular-template-driven-forms @GregOnNet Software Engineer & Coach
38. Attributions • Photo by Mario Heller on Unsplash • Photo by Lina Trochez on Unsplash