Why It’s Time to Say Goodbye to Angular Template-Driven Forms
Angular gave us the powerful tool that is reactive forms. As a result, I’ve opted to stop using template-driven forms altogether. Here’s why:
Readability
As our template grows it becomes harder to understand the component’s form structure. For example, let’s take a basic login form:
If we use template-driven forms, we’ll have to make an effort to understand the form structure. Let’s compare this with the same form built using reactive forms:
With this approach we can see immediately the structure of our form in a very clean way, without rooting around the template file.
Visibility
With template-driven forms getting a reference to the form or its controls is more verbose.
We need to use template variables to get access to the form value or ViewChild() to get access to the form instance in our component.
Let’s compare this with the reactive approach:
We can access the form in our component at any point and we don’t need to use template variables to get its values. This makes it easier to pass form controls as inputs() to other components.
Validators
If we want to use custom validators with template-driven forms, we must create a custom directive in addition to the validation functionality. For example:
Whereas with reactive forms we can use the function directly:
Another important thing that you should pay attention to is that unlike reactive forms, template-driven forms are asynchronous.
One of the side effects of this is that if you have a validator that depends on another control, you should add a condition to ensure that control exists. For example:
Whereas with reactive forms you can omit that condition.
It’s Just JavaScript
I like to compare reactive forms to what is commonly said in the world of React — you have the power of JS. Reactive forms are pure JS, which makes them the winners when it comes to reusability and dynamic use.
Two way binding
Template-driven forms expose a two-way binding option which breaks the one-way data flow and immutability principles and makes your code bug-prone and hard to reason about.
Testability
When using template-driven forms, we must create a component in order to test our forms and use one of the async testing helpers that Angular provides. When using reactive forms, this is not required, simplifying the testing process.
Why NOT use both?
There are four reasons I can think of:
- Steep learning curve.
- We’ll need to load both, so our bundle will get slightly bigger.
- We can’t predict which strategy the developer will choose so it becomes harder to go over pull requests.
- In my opinion it’s always good to stick to a single paradigm, unless there is a good reason not to.
I want to be fair and give you a different point of view from Ward Bell, where he claims the exact opposite. You can read his opinion in the following comment:
Follow me on Medium or Twitter to read more about Angular, Vue and JS!
