Angular Form Examples: Template Driven vs Reactive Forms

Key Takeaways

• Angular provides two ways to create forms: Template Driven and Reactive forms.
• Template Driven forms use directives for two-way data binding and are similar to AngularJS.
• Reactive forms provide a more programmatic, testable, and powerful approach using Reactivity.
• Both approaches achieve similar results and can be chosen based on specific project needs.

In Angular, forms can be created using two primary approaches: Template Driven and Reactive forms. Template Driven forms will feel familiar to those with AngularJS experience due to their use of directives and simpler, declarative nature. In contrast, Reactive forms leverage the power of observables and a more functional programming style.

Both approaches are capable of delivering similar outcomes, but each has its own strengths. Here's a rundown of how you can implement each method in an Angular application.

Angular Form Example

We're going to build a basic form in Angular using both Template Driven and Reactive strategies for comparison.

Importing the Modules

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Both Template Driven and Reactive Forms require specific modules from @angular/forms. Make sure to import FormsModule and ReactiveFormsModule in the app.module.ts file to enable both forms of functionality.

The Data Model

user.ts

export class User {
  constructor(
    public name: string,
    public age: number
  ){}
}

Create a dedicated data model to model entities in your application. For our example, this User class simply includes name and age fields, simplifying our form interaction.

The Template Driven Way...

app.component.ts

import { Component } from '@angular/core';
import { User } from './user';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = new User('', 0);

  submitForm() {
    console.log(`${this.user.name} is ${this.user.age} years old`);
  }
}

app.component.html

<form #myForm="ngForm" (ngSubmit)="submitForm()">

  <label>Name:</label>
  <input type="text" [(ngModel)]="user.name" name="name" #nameField="ngModel" required />

  <label>Age:</label>
  <input type="text" [(ngModel)]="user.age" name="age" #ageField="ngModel" />

  <button type="submit" [disabled]="!myForm.valid">Submit</button>

</form>

<p>Name: {{user.name}}</p>
<p>Age: {{user.age}}</p>

<p style="color:red" [hidden]="nameField.valid || !nameField.touched">Your name is required!</p>

The template-driven example above uses Angular's (ngModel) directive for two-way data binding, directly linking the user input fields to the component's data model. This approach involves automatic synchronization of input values in the form with the data model defined in the component.

The Reactive Way

app.component.ts

import { Component } from '@angular/core';
import { User } from './user';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = new User('', 0);
  myForm = new FormGroup({
    name: new FormControl('', Validators.required),
    age: new FormControl('')
  });

  submitForm() {
    console.log(`${this.myForm.controls.name.value} is ${this.myForm.controls.age.value} years old`);
  }
}

app.component.html

<form [formGroup]="myForm" (ngSubmit)="submitForm()">

  <label>Name:</label>
  <input type="text" formControlName="name"/>

  <label>Age:</label>
  <input type="text" formControlName="age"/>

  <button type="submit" [disabled]="!myForm.valid">Submit</button>

</form>

<p>Name: {{myForm.controls.name.value}}</p>
<p>Age: {{myForm.controls.age.value}}</p>

<p style="color:red" [hidden]="myForm.valid || !myForm.touched">Your name is required!</p>

Reactive forms replace ngModel with Reactive form directives like FormGroup and FormControl. They allow you to define the form model in the component class, offloading form data and validation into the class logic, enhancing testability, and leveraging Angular's reactive programming.

Template Driven vs Reactive Forms

Both Template Driven and Reactive Forms reach similar ends through different means. Template Driven Forms often appeal to those transitioning from AngularJS, as they feel more intuitive with their directive-driven syntax. Meanwhile, Reactive Forms shine in complex scenarios thanks to their advanced features like dynamic form validation and control over form arrays.

Reactive Forms also work comfortably within Angular's unification with RxJS, enabling powerful reactive data flow and handling. As you decide between the two, consider your project's complexity and the life cycle of the forms you're building.

Conclusion

Angular forms, whether Template Driven or Reactive, allow you to implement complex and efficient forms for any web application. The choice between the two is largely dictated by the specific needs and familiarity of the development team with reactive programming concepts. Both have their place, and understanding them will enable you to make informed decisions tailored for your applications.

FAQ

What version of Angular are these examples compatible with?

These examples are compatible with the latest stable release as of 2026. Always refer to the official Angular documentation to ensure compatibility with your version.

When should I use Reactive forms?

Use Reactive forms when you need to manage complex form interactions, validations, and dynamic form fields. They're highly recommended for projects requiring advanced functionality and scalability.

Can I mix Template Driven and Reactive forms in a single application?

Yes, Angular allows you to use both Template Driven and Reactive Forms in the same application. You can decide which to use depending on the requirements of specific forms you are building.