Originally posted on my blog
This post assumes that you have at least basic knowledge about Angular and especially Angular Forms.
Forms are a core element when it comes to building apps. We use it to log in everyday, submit data, post a request, etc. In Angular, we have two main ways to handle forms: Reactive form and Template-driven form. Both are useful depending on the use-case. In this following line, I will lead you to 5 reasons on why you should use Reactive instead of Template-driven forms in Angular.
1. Immutability
Reactive form keeps the data model pure by providing it as an immutable data structure. It uses an immutable approach to manage the state of a form. In other words, it will not mutate the form state. Each time a change occurs to the form, the FormControl instance will not update the existing data model, it will return a new state (a new data model). Reactive form uses observable operators to return a new data model. And that way, it will always maintain the integrity of the model between changes. For the template-driven form, it uses the mutable approach. Because it relies on two-way data binding with ngModel to update the data model in the component following changes made in the template.
2. Predictability
Reactive form is predictable because it accesses synchronously to the data model. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed in a synchronous way. It also uses observable streams to track changes in the form. And that predictability makes testing easy.
The template-driven form is asynchronous and therefore unpredictable.
3. Structured data flow
Template-driven form directive ngModel is responsible for creating and managing the FormControl instance for a given form element. Reactive form access directly to the FormControl instance after the creation of the link with FormControlDirective due to the fact that reactive form is led by component class. And therefore each element in the view(template) is linked to the FormControl(form model). And when a change occurs, and a view update is needed, it will not re-render the DOM because reactive form is synchronous and it's not dependent on the UI rendering.
In template-driven forms, each form element is linked to a directive that manages the form model internally.
4. Scalability
Due to the fact that reactive form is synchronous makes scaling easier. It is reusable and helps a lot with large-scale forms. Template-driven form is not reusable because it provides asynchronous access to the form model and therefore the scalability is tough with it.
5. Testing
In a small Angular app, testing is not mandatory. But when you work in the larger or more complex app, it becomes obvious to test it before production. And reactive forms are easier to test than template-driven forms. Because it provides synchronous access to the form and data models, and it can be tested without rendering the UI.
Template-driven form requires more knowledge of the change detection process and an understanding of how directives run on each cycle to ensure that elements are queried, tested, or changed at the correct time.
Conclusion
Reactive and Template-driven forms are useful and different in many points. In a very small form using a template-driven form is better because it's very easy to setup. But in the case that forms become a key part of your app, using the reactive form is required because it's more predictable, reusable, scalable and testable.
Top comments (0)