How to Create Reactive Form in Angular: Simple Guide

To create a reactive form in Angular, import ReactiveFormsModule and use FormGroup and FormControl to define form controls in your component. Bind the form group to your template with [formGroup] and use formControlName on inputs to connect controls.

Syntax

Reactive forms use FormGroup to group controls and FormControl for each input. You define the form structure in the component class and bind it in the template.

• FormGroup: Represents the whole form or a group of controls.
• FormControl: Represents a single input field.
• ReactiveFormsModule: Must be imported in your Angular module.

typescript

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-example-form',
  template: `
    <form [formGroup]="profileForm">
      <label for="firstName">First Name:</label>
      <input id="firstName" formControlName="firstName">

      <label for="lastName">Last Name:</label>
      <input id="lastName" formControlName="lastName">

      <button type="submit" [disabled]="!profileForm.valid">Submit</button>
    </form>
  `
})
export class ExampleFormComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  });
}

Example

This example shows a simple reactive form with two text inputs for first and last names. The form is disabled until both fields are valid (non-empty).

typescript

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

@Component({
  selector: 'app-profile-form',
  template: `
    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
      <label for="firstName">First Name:</label>
      <input id="firstName" formControlName="firstName">
      <div *ngIf="firstName.invalid && firstName.touched" style="color:red;">First name is required.</div>

      <label for="lastName">Last Name:</label>
      <input id="lastName" formControlName="lastName">
      <div *ngIf="lastName.invalid && lastName.touched" style="color:red;">Last name is required.</div>

      <button type="submit" [disabled]="profileForm.invalid">Submit</button>
    </form>
    <p *ngIf="submitted">Form Submitted! Value: {{ profileForm.value | json }}</p>
  `
})
export class ProfileFormComponent {
  profileForm = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', Validators.required)
  });

  submitted = false;

  get firstName() { return this.profileForm.get('firstName'); }
  get lastName() { return this.profileForm.get('lastName'); }

  onSubmit() {
    this.submitted = true;
  }
}

Output

The form shows two input fields with labels. Submit button is disabled until both fields have text. On submit, a message appears showing the entered values in JSON format.

Common Pitfalls

• Forgetting to import ReactiveFormsModule in your Angular module causes errors.
• Not binding [formGroup] on the <form> element breaks the connection between template and form model.
• Using formControlName without a matching control in the FormGroup causes runtime errors.
• Not adding validators or checking form validity can lead to submitting invalid data.

typescript

/* Wrong: Missing ReactiveFormsModule import in app.module.ts */
// This causes errors when using reactive forms.

/* Wrong: Missing [formGroup] binding in template */
<form>
  <input formControlName="firstName">
</form>

/* Right: Correct binding and import */
// In app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports: [ReactiveFormsModule]
})

// In template
<form [formGroup]="profileForm">
  <input formControlName="firstName">
</form>

Quick Reference

Remember these key points when creating reactive forms:

• Import ReactiveFormsModule in your module.
• Define your form model with FormGroup and FormControl in the component.
• Bind the form model to the template with [formGroup].
• Use formControlName on inputs to connect controls.
• Use validators to enforce rules and check form.valid before submitting.

Key Takeaways

Always import ReactiveFormsModule to use reactive forms in Angular.

Define form controls in the component using FormGroup and FormControl.

Bind the form group to the template with [formGroup] and use formControlName on inputs.

Use validators to ensure form inputs are valid before submission.

Check form validity to enable or disable the submit button.