$30 off During Our Annual Pro Sale. View Details »

Pride and Prejudice - Template Driven Forms

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?

Gregor Woiwode

October 10, 2024
Tweet

More Decks by Gregor Woiwode

Other Decks in Education

Transcript

  1. Why we dislike template-driven forms • fragmented setup in template

    and component class • templates got too big • handling a control-Array is inconvenient
  2. Why we like reactive forms • more convenient way to

    create forms • better integrations with streams • better handling for lists of controls with FormArray<T>
  3. The unknown trade-offs Template-driven forms... • have a declarative API

    • create FormGroup - & FormControl behind the scenes • remove FormGroup - & FormControl behind the scenes
  4. NgForm NgModel NgModelGroup valueChanges statusChanges valueChanges setErrors Component model schema

    (formUpdated) (formSafeSubmit) FormSchema process errors validations yield Overview
  5. validate related fields fields to be validated condition error Where

    the error should be displayed target field(s)
  6. infer typed model from schema { firstname: string, lastname: string,

    email: { email: string, verification: string }
  7. error notification for NgModel & NgModelGroup - reading error-Stream -

    Find respective error - setErrors on ngModel - *required name (DX)
  8. 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.
  9. 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