11.Reactive Forms

Handling user input with forms is the cornerstone of many common applications. Applications use forms to enable users to log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks.

Reactive Forms in Angular is a powerful feature that allows you to create and manage complex forms in your Angular applications. It provides a reactive and declarative approach to form handling, making it easier to handle form validation, synchronization, and dynamic form control.

Step 1: Import the ReactiveFormsModule

To use reactive form controls, import ReactiveFormsModule from the @angular/forms package and add it to your NgModule’s imports array.

import { ReactiveFormsModule } from ‘@angular/forms’;

@NgModule({

  imports: [

    // other imports …

    ReactiveFormsModule

  ],

})

export class AppModule { }

Step 2: Create a FormGroup

In your component file (e.g., app.component.ts), import the necessary modules and create a FormGroup instance using the FormBuilder:

import { Component } from ‘@angular/core’;

import { FormBuilder, FormGroup } from ‘@angular/forms’;

@Component({

  selector: ‘app-root’,

  templateUrl: ‘./app.component.html’,

  styleUrls: [‘./app.component.css’]

})

export class AppComponent {

  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {

    this.myForm = this.formBuilder.group({

      // Define your form controls and their initial values

    });

  }

}

Step 3: Define Form Controls

Inside the FormGroup, you can define form controls using the FormControl class. Each form control can have an initial value and optional validators:

this.myForm = this.formBuilder.group({

  firstName: [”, Validators.required],

  lastName: [”, Validators.required],

  email: [”, [Validators.required, Validators.email]],

  // …

});

Step 4: Bind Form Controls in the Template

In your component’s template (e.g., app.component.html), bind the form controls to the input elements using the formControlName directive:

<form [formGroup]=”myForm” (ngSubmit)=”onSubmit()”>

  <label>

    First Name:

    <input type=”text” formControlName=”firstName”>

  </label>

  <label>

    Last Name:

    <input type=”text” formControlName=”lastName”>

  </label>

  <label>

    Email:

    <input type=”email” formControlName=”email”>

  </label>

  <!– … –>

  <button type=”submit” [disabled]=”myForm.invalid”>Submit</button>

</form>

Step 5: Handle Form Submission

In your component, you can handle the form submission by defining a method and subscribing to the ngSubmit event:

onSubmit() {

  if (this.myForm.valid) {

    // Form is valid, perform necessary actions

    console.log(this.myForm.value);

  } else {

    // Form is invalid, handle error or display validation messages

  }

}