What are the practical differences between template-driven and reactive forms?
AngularAngular2 FormsAngular Problem Overview
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?
Angular Solutions
Solution 1 - Angular
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
Solution 2 - Angular
Here is the summary of comparision between template driven and reactive forms explained by DeborahK (Deborah Kurata) well,
Solution 3 - Angular
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
Solution 4 - Angular
Reactive forms:
- reusable,
- more robust,
- testable,
- more scalable
Template-driven forms:
- easy to add,
- less scalable,
- basic form requirements
In summaries, if forms are very important for your app, or reactive pattern are used in your app, you should use reactive forms.Otherwise your app have basic and simple requirement for forms such as sign in, you should use template-driven forms.
Solution 5 - Angular
Easiest way to know the difference between Reactive forms and Template-driven forms
i can say if you want more control and scalability go with Reactive forms
Solution 6 - Angular
Template Driven Forms :
imported using FormsModule
Forms built with ngModel directive can only be tested in an end to end test because this requires the presence of a DOM
The form value would be available in two different places: the view model ie ngModel
Form validation, as we add more and more validator tags to a field or when we start adding complex cross-field validations the readability of the form decreases
Reactive Forms :
Can generally used for large-scale applications
complex validation logic is actually simpler to implement
imported using ReactiveFormsModule
The form value would be available in two different places: the view model and the FormGroup
Easy to Unit Test : We can do that just by instantiating the class, setting some values in the form controls and perform assertions against the form global valid state and the validity state of each control.
Use of Observables for reactive programming
For example: a password field and a password confirmation field need to be identical
Reactive way : we just need to write a function and plug it into the FormControl
Template-Driven Way : we need to define a directive and somehow pass it the value of the two fields
https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/