What are the practical differences between template-driven and reactive forms?
I have been reading about Angular2 new Forms API and it seems that there are two approaches on forms, one is Template driven forms other is reactive or model-driven forms.
I would like to know the practical difference between the two, not the difference in syntax (obviously) but practical uses and which approach benefits more in different scenarios. Also, is there a performance gain in choosing one over the other? And if yes, why?
Answer
Template Driven Forms Features
- Easy to use
- Suitable for simple scenarios and fails for complex scenarios
- Similar to AngularJS
- Two way data binding(using
[(NgModel)]syntax) - Minimal component code
- Automatic track of the form and its data(handled by Angular)
- Unit testing is another challenge
Reactive Forms Features
- More flexible, but needs a lot of practice
- Handles any complex scenarios
- No data binding is done (immutable data model preferred by most developers)
- More component code and less HTML markup
- Reactive transformations can be made possible such as
- Handling a event based on a debounce time
- Handling events when the components are distinct until changed
- Adding elements dynamically
- Easier unit testing