Angular Forms: Template Driven and Reactive Forms

Pradeep Maurya
angular forms

Angular Forms:

Angular Forms are the most important block of any application to collect the data from the users or visitors. Developing forms requires design skills as well as framework support for two way data binding, error handling, validation.

Also Read: How to Use *ngIf else, then directive in Angular

Types of Angular forms

Angular provides two ways for handling user input through form.

  1. Template driven forms
  2. Reactive forms (Model driven form)

Template Driven Form

Template driven form approach is used when we need to develop static forms, Means the structure and logic of the form is fixed, Like Registration form, Login Form, Reset password form, add order form.

These are called template driven because everything that we are going to use in an application is defined into the template that we are defining along with the component.

Prerequisite:

We need to import FormModule in an Application module file like app.module.ts

Feature:

  1. Easy to use
  2. Minimal component code
  3. Two way data binding using NgModel syntax
  4. Suitable for simple form but fails for complex form
  5. Automatic track of the form and its data
  6. Unit testing is another challenge
  7. Forms structure & Logic implemented in HTML

Reactive forms (Model driven form)

The model of a Reactive Forms or Model-Driven forms is created in the .ts file which is responsible for handling all the user interactions/validations. With Reactive form, we need to create the Model using Angular’s inbuilt classes like formGroup and formControl and after this we need to bind that model to HTML Form.

With this approch, we create the tree of Angular form controls and bind them in the native form controls. As we can create the form controls directly in the component, it make it a bit easier to push the data between the data models and the UI elements.

In Reactive Forms, structure and logic are mostly written in the Typescript file. It can handle data easily when we have dynamic fields, repetitive fields in our form. Data exchange, in Reactive Forms is performed by transferring the value property from HTML to TypeScript.

Prerequisite:

We need to import ReactiveFormModule in our app.module.ts file.

Features:

  1. More flexible, but needs a lot of practice
  2. More component code and less HTML makrup
  3. No data binding
  4. immutable data model preferred by most developers
  5. Handles any complex forms
  6. Handling a event based on a denounce time.
  7. Events handling basen on the components are distinct until changed
  8. Adding elements dynamically
  9. Easier unit testing

How to import form module in angular

Which one is better? Template driven forms or Reactive forms

Neither Template Driven nor Reactive are better over each other. Both forms have different approaches, So you can use whichever suits your application the most. You can even use both in the same application.

High-level Differences between Template-driven and Reactive Forms

  1. Template-driven forms make use of the “FormsModule”, while reactive forms are based on “ReactiveFormsModule”.
  2. Template-driven forms are asynchronous in nature, whereas Reactive forms are mostly synchronous.
  3. In template-driven approach, most of the logic is derived from the template, while in the reactive-driven approach, the logic exists mostly in the component or typescript code.
Angular Forms

Conclusion:

I hope you found this Angular Forms tutorial helpful for your project. Keep learning!.

If you’re just learning Angular, take a look at the Angular for Beginners Course:

Angular 10 Complete Course for Beginners in Hindi Crash Course

Related posts