Template Driven Forms vs Reactive Forms (Angular JS)

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.

What is the difference between template and reactive forms?

Major differences between template driven and reactive forms are as follows:

Template Driven Form uses “FormsModule”. It is synchronous in nature. Here, most of the logic is driven from the template. It provides the easiest way to add a form to your application. It is suitable for simple scenarios. Template driven form contains minimal component code. It has two way data binding(using [(NgModel)] syntax). Unit testing is another challenge in template driven forms.

Reactive Form is based on “ReactiveFormsModule”. They are mostly synchronous in nature. Here, the logic resides mainly in the component or typescript code. It is more robust, scalable, reusable, and testable form compared to template driven. It can handle any complex scenarios. Reactive form contains more component code and less HTML markup. No data binding is performed and unit testing can be done very easily.

Template driven form

These forms are basically useful when adding very basic forms to your apps like a simple email list signup form. Simply forms which has basic requirements, with minimal logic needs and might need no scaling in the future.

• Example mentioned below is the simple login details form.

import { Component } from '@angular/core';
@Component({
  selector: 'app-template-login-details',
  template: `
    Email: <input type="text" [(ngModel)]="loginDetails">
   
  `
})
export class LoginDetailsComponent {
  loginDetails = '';
}

Reactive form

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.

• Below mentioned block is an example of reactive form for employee details. The sample attributes are employee name and department name. Since the department of an employee is not fixed in a company we prioritize Reactive form over template driven form.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
  selector: 'app-reactive-employee-details',
  template: `
    Employee Name: <input type="text" [formControl]="employeeDetailsControl">
    Department Name: <input type="text" [formControl]="employeeDetailsControl">
  `
})
export class EmployeeDetailsComponent {
  employeeDetailsControl = new FormControl('');
}

Which one to prefer?

• If you are a beginner and creating sample works then template driven forms are good at an initial step.
• If you are assigned in a real time project and dealing with complex structures then choose reactive forms over template driven forms.

Happy Devloping!