Reactive Forms VS Template Driven Forms in Angular
Angular provides two different approaches to handling user input through forms: reactive and template-driven. Both capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.
When I had just started with angular form, I faced a challenge knowing which of the two to use and at times who end up using both. Therefore, I will through some light on the difference between the two and when to use which and my recommendation.
Template Driven Form?
Template Driven form provides the easiest way to add a form to your application.
Below is an example from angular documentation of the template-driven form implementation
import { Component } from '@angular/core';@Component({
selector: 'app-template-favorite-color',
template: `
Favorite Color: <input type="text" [(ngModel)]="favoriteColor">
`
})
export class FavoriteColorComponent {
favoriteColor = '';
}
These forms are basically useful when adding very basic forms to your apps like a simple email list signup form.
Simply forms which basic requirements, with minimal logic needs and might need no scaling in the future.
Reactive Forms (Model-Driven Forms).
The reactive form is also known as model-driven forms is a are more robust: more scalable, reusable, and testable form.
Below is an example from angular documentation of the reactive form implementation
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';@Component({
selector: 'app-reactive-favorite-color',
template: `
Favorite Color: <input type="text" [formControl]="favoriteColorControl">
`
})
export class FavoriteColorComponent {
favoriteColorControl = new FormControl('');
}
Therefore, if forms are a key part of your application, or you’re already using reactive patterns for building your application, then the reactive form is a suitable match for the application
And also if you prefer direct access to modify data in your template as it is more explicit than the template-driven forms which are less explicit because they rely on directives embedded in the template, along with mutable data to track changes asynchronously.
My Recommendation
However much Template-driven model gets things started easily, I highly recommend sticking to the reactive (model-driven) forms.
why?
- Provides a one-way data flow making the code less prone to errors & easier to reason about it.
- Reactive forms are purely in JS, hence giving you the full power of JS to your forms.
- Testing them is much easier since we don’t have to first create a component to test them as it is for the template-driven forms
These are my views in relation to the two angular form types, if you want to do more about them, below are some of the references you could you.
Happy Code :)
References
