Forms in Angular - A Comprehensive Guide to Building Reactive and Template-Driven Forms

Forms are a fundamental part of any web application, enabling users to interact with the app, provide information, and submit data. In Angular, forms can be implemented using two main approaches: Template-driven and Reactive forms. Each approach has unique benefits, so understanding how to use them effectively can elevate your Angular app development.

In this post, we'll dive into the following:

1. Template-driven forms
2. Reactive forms
3. Form validation
4. Comparing the two approaches

1. Template-Driven Forms

Template-driven forms in Angular rely heavily on Angular's two-way data binding. They’re built directly in the HTML template using directives like ngModel. Template-driven forms are ideal for simpler forms and are particularly helpful when you don’t need to programmatically control form behavior.

Setting Up a Template-Driven Form

To start with a template-driven form, you’ll first need to import the FormsModule in your AppModule.

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule],
})
export class AppModule {}

Building a Simple Registration Form

<form #registerForm="ngForm" (ngSubmit)="onSubmit(registerForm)">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" ngModel required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" ngModel required email>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" ngModel required minlength="6">

  <button type="submit" [disabled]="registerForm.invalid">Register</button>
</form>

Here’s a breakdown:

• ngModel: Binds the input elements to the model.
• #registerForm="ngForm": Creates a local reference for the form.
• ngSubmit: Binds the form submission to a method in your component.

Handling Form Data in the Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html'
})
export class RegisterComponent {
  onSubmit(form: any) {
    console.log('Form Data:', form.value);
  }
}

With template-driven forms, Angular automatically handles the form instance for you, which is beneficial for simple use cases.

2. Reactive Forms

Reactive forms provide a more programmatic approach to building forms and give you more control over validation, value changes, and error management. Unlike template-driven forms, reactive forms rely on explicit form control objects within the component class.

Setting Up a Reactive Form

To use reactive forms, you’ll need to import ReactiveFormsModule in your AppModule.

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule],
})
export class AppModule {}

Building a Reactive Login Form

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
  loginForm!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]],
    });
  }

  onSubmit(): void {
    if (this.loginForm.valid) {
      console.log('Form Data:', this.loginForm.value);
    }
  }
}

HTML Template for Reactive Form

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">

  <label for="password">Password:</label>
  <input type="password" id="password" formControlName="password">

  <button type="submit" [disabled]="loginForm.invalid">Login</button>
</form>

In this example:

• FormGroup defines the structure of the form.
• formControlName links form controls to the component class.

3. Form Validation

Angular provides built-in validators such as Validators.required, Validators.email, and Validators.minLength etc. that can be used in both form types. For custom validation, you can create validator functions to enforce specific business rules.

Adding Custom Validation

In a reactive form, custom validators are easily applied within the FormBuilder.

function strongPassword(control: FormControl) {
  const hasNumber = /\d/.test(control.value);
  const hasUppercase = /[A-Z]/.test(control.value);
  const isValid = hasNumber && hasUppercase;
  return isValid ? null : { strongPassword: true };
}

To apply it, add the validator to a control:

this.loginForm = this.fb.group({
  password: ['', [Validators.required, strongPassword]],
});

4. Comparing Template-Driven and Reactive Forms

Conclusion

Angular forms, whether template-driven or reactive, offer powerful ways to collect and validate user input. While template-driven forms work well for simple forms, reactive forms provide robust tools for more complex scenarios. Understanding both approaches and choosing the right one for your app’s needs will greatly improve the development process.

Start with the basics and practice building forms using both methods to gain confidence in handling Angular forms in real-world applications.

Find out more: Angular Forms

Happy larning!! 😊