This post assumes that you have at least a basic knowledge about Angular and specially Angular Forms.
Forms are a core element, when it comes to build 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 these following lines, I will lead you through 5 reasons on why you should use Reactive instead of Template-driven forms in Angular.
Sorry for the interrupt!
If you're interested in learning Angular in a comprehensive way, I highly recommend this bestseller course: Angular - The Complete Guide (2020 Edition)It's an affiliate link, so by purchasing, you support the blog at the same time.
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. In that way, it will always maintain the integrity of the model between changes.
For the template-driven form, it uses the mutable approach. Due to the fact that it relies heavily on two-way data binding with
ngModel to update the data model in the component following changes made in the template.
Reactive form is predictable because it access 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 leaded 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 to the UI rendering.
In template-driven forms, each form element is linked to a directive that manages the form model internally.
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.
In a small Angular app, testing is not mandatory. But when you work in larger or more complex app, it becomes obvious to test it before production. And reactive forms are more easy 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.
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 which forms become a key part of your app, using reactive form is required because it's more predictable, reusable, scalable and testable.