Angular Reactive Forms offer a robust way to build forms in Angular applications. Reactive Forms provide a more explicit and flexible approach compared to Template-Driven Forms. This tutorial will guide you through the process of setting up and using Reactive Forms in an Angular application.

Step 1: Setup Your Angular Project

If you don’t have an Angular project set up yet, you can create one using the Angular CLI:

ng new my-angular-project
cd my-angular-project

Step 2: Import ReactiveFormsModule

Reactive Forms are part of @angular/forms package. You need to import ReactiveFormsModule in your Angular module where you want to use Reactive Forms.

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

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

Step 3: Create a Form Component

Create a new component to contain your form. You can use Angular CLI to generate a new component.

ng generate component my-form

Step 4: Build Your Form

In the component template (my-form.component.html), define your form using Angular’s form directives.

<!-- my-form.component.html -->
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" formControlName="name">
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email">
  </div>
  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

Step 5: Set Up Form Control in the Component

In the component class (my-form.component.ts), create and configure your form controls using FormGroup and FormControl.

// my-form.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      console.log('Form submitted:', this.myForm.value);
    }
  }
}

Step 6: Use the Form Component

Finally, include your form component (app-my-form) in your main template or routing configuration.

<!-- app.component.html -->
<h1>Angular Reactive Forms Example</h1>
<app-my-form></app-my-form>

Step 7: Additional Features

Reactive Forms offer many additional features such as dynamic form groups, form arrays, custom validators, and more. Explore the Angular documentation for more advanced usage.

Conclusion

Angular Reactive Forms provide a powerful way to build and manage forms in Angular applications. This tutorial covered the basic setup and usage of Reactive Forms, including creating forms, adding validation, and handling form submission. For more advanced usage and detailed documentation, refer to the official Angular Reactive Forms documentation.