What are the practical differences between template-driven and reactive forms?
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
I think that it´s a discussion about code, strategy and user experience.
In summary we change from template-driven approach which is more easy to work with it, to reactive (in model-driven approach) for giving us more control, that results in a better testable form by leveraging a decoupling between the HTML (design/CSS team can work here) and component's business rules (angular/js specialist members) and to improve the user experience with features like reactive transformations, correlated validations and handle complex scenarios as runtime validation rules and dynamic fields duplication.
This article is a good reference about it:Angular 2 Forms - Template Driven and Model Driven Approaches