Have You Ever Been Confused Between Using a Template-Driven or Reactive Form? — Angular
A trip to the Forms’ world in the Angular Planet
Hi dear reader, welcome back to the front-end world!
Today I choose to talk about Form in Angular. I actually choose this topic based on my experience as a lead front-end developer. This topic is often confusing since there are two types of forms in Angular: The Template-Driven Forms and the Reactive Forms.
I wrote this article to my team and all developers worldwide to help you remove the confusion between those two types forever. Yes, you read right! I’ll share with you the keys and the procedure to be a pro in this topic (▀̿Ĺ̯▀̿ ̿)
Excited, Nah? I need you to give me your mind and focus. That all you’ll need.
Here is how I’m going to tackle this problem:
- The Template Driven approach
- The Reactive Forms approach
- When to use each approach?
- Takeouts for the Template Driven approach
- Takeouts for the Reactive approach
The Template Driven approach
- What is it?
As it’s named, it’s a form that is declared and validated on the template side (HTML). The Angular framework provides an interesting mechanism named ngModel, two-way data binding that allows us to build the Template-Driven forms.
- How does it work?
One of the keywords is: ngModel and other Angular directives. Those directives can not be used by default in the template. That’s why to use the template-driven approach. We need to import a specific module that will make the DOM understands what’s ngModel and other directives in the template.
- How to use it?
In order to use those directives, all you need it to import the FormsModules into the root module of your Angular app.
- Want to see it in code?
The module importing the FormsModule:
The template with the form:
With the FormsModule imported, Angular will apply ngForm to every <form> in your app. Thus, it will understand automatically the Angular directives such as the ngModel.
⚠️ Tip: If you have an error saying that <form> don’t understand what’s ngModel, that’s because your Module is lazy loaded therefore not imported in the main app module. That means that you need to import the FormsModule in that separated lazy loaded module. Sometimes the setup is all right. A restart of your app resolves the problem ;)
The Reactive Forms approach
- What is it?
The Angular Reactive form is as it’s called reactive. It’s generated and orchestrated by the component class. Its surface is similar to the template-driven form. But, the whole logic is managed and controlled by the class.
- How does it work?
The keywords this time in the reactive forms are: [formGroup], formControlName. You may have noticed that we don’t use ngModel in the reactive form approach, thus no need for importing FormsModule if we are going to use the reactive approach.
- How to use it?
As you have read so far, there are other keywords that we need to use so as to be able to create our reactive form. Therefore we still need to import a module that will make the DOM (template) understands those keywords. That module is the ReactiveFormsModule.
- Want to see it in code?
Importing the module:
Creating a reactive form:
As you can see, it’s really similar to the template-driven form. The difference is only the used directives. But that’s not all. There another unseen difference here. The validation logic is not in the template anymore, Nah?
To understand this, let’s see what the class look like with the reactive approach:
As you can see in the component’s code, the logic is managed and controlled by the component itself and not the template, thanks to the Angular Validators.
By the way, the same tip applies here too for importing issues.
When to use each approach?
When to use Template-Driven approach
- When you are migrating an AngularJS app to Angular 2+. It’s easier to consider this approach as in both frameworls we use
ngModelderictive. - When you have a small form with almost no complex validation required.
When to use the reactive approach
- Reactive Forms scale better for larger and more complex forms and support better more advanced use cases.
- When you want a clear separation between business logic and view logic.
- When you have complex and custom validation rules
- When you are building a new application from scratch, it’s better to generally use this approach in the whole app to make it harmonious and maintainable.
My point of view
As a lead front-end developer, I still use both approaches. In the case of a big form, I’d go for sure for the Reactive approach. Whereas with only two inputs and no special validation is required, building the form programmatically in the component is for me a waste of time and extra code since the power of the Reactive approach is not used at all in this case.
💼Takeouts for the Template Driven approach
- Requires importing the
FormsModule - Used directives:
ngModel - The validation logic appears on the template side
- With the T-D approach, the form model is built for us behind the scenes.
💼Takeouts for the Reactive approach
- requires importing the
ReactiveFormsModule - Used directives:
formGroup,formControlName - The validation logic appears and managed on the component class side
- With the reactive approach, we are defining the form model programmatically.
- This approach is more maintainable since the business logic and the presentation logic are separated.
This article was a guideline to help you draw a mental picture of the forms in Angular. I didn’t dive deeper into both approaches to avoid confusing you. But if you’d like a more detailed article about updating form values, resetting a form, observable-based API, and much more, feel free to let me know in the comment section. I’ll write a new article for you with big pleasure. ❤
Dear readers and friends, thank you for your support and your precious time. I hope this was useful and helpful for you.
Follow me on Medium, Linkedin, Facebook, and Twitter for more articles.
See you soon (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
FAM
