How to Test Form in Angular: Simple Guide with Examples

To test a form in Angular, use TestBed to create the component and access the form controls via FormGroup or template references. Use Jasmine to check form validity, control values, and simulate user input by setting values and triggering events.

Syntax

Testing Angular forms involves setting up the test environment with TestBed, accessing the form controls, and asserting their state.

• TestBed.configureTestingModule: Sets up the testing module with necessary imports and declarations.
• fixture.componentInstance: Accesses the component instance to get the form.
• component.form.controls['controlName']: Accesses individual form controls.
• control.setValue(value): Sets a value to a form control.
• expect(control.valid).toBe(true): Checks if the control is valid.

typescript

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { MyFormComponent } from './my-form.component';

describe('MyFormComponent', () => {
  let component: MyFormComponent;
  let fixture: ComponentFixture<MyFormComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [MyFormComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(MyFormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should have form invalid when empty', () => {
    expect(component.form.valid).toBeFalse();
  });

  it('should validate form control', () => {
    const nameControl = component.form.controls['name'];
    nameControl.setValue('John');
    expect(nameControl.valid).toBeTrue();
  });
});

Example

This example shows how to test a simple reactive form with a single name input. It checks that the form is invalid when empty and valid when a proper value is set.

typescript

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

@Component({
  selector: 'app-my-form',
  template: `<form [formGroup]="form">
               <input formControlName="name" />
             </form>`
})
export class MyFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', Validators.required]
    });
  }
}

// Test file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { MyFormComponent } from './my-form.component';

describe('MyFormComponent', () => {
  let component: MyFormComponent;
  let fixture: ComponentFixture<MyFormComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [MyFormComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(MyFormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('form invalid when empty', () => {
    expect(component.form.valid).toBeFalse();
  });

  it('name field validity', () => {
    const name = component.form.controls['name'];
    expect(name.valid).toBeFalse();

    name.setValue('Alice');
    expect(name.valid).toBeTrue();
  });
});

Output

PASS  form invalid when empty
PASS  name field validity

Common Pitfalls

Common mistakes when testing Angular forms include:

• Not importing ReactiveFormsModule or FormsModule in the test module, causing errors accessing form controls.
• Forgetting to call fixture.detectChanges() after setting up the component, so the form is not initialized.
• Trying to test template-driven forms without accessing the form controls properly.
• Not simulating user input correctly by setting values directly on controls instead of triggering events.

typescript

/* Wrong: Missing ReactiveFormsModule import */
TestBed.configureTestingModule({
  declarations: [MyFormComponent]
});

/* Right: Include ReactiveFormsModule */
TestBed.configureTestingModule({
  imports: [ReactiveFormsModule],
  declarations: [MyFormComponent]
});

Quick Reference

Tips for testing Angular forms:

• Use ReactiveFormsModule for reactive forms and FormsModule for template-driven forms in tests.
• Access form controls via component.form.controls['controlName'].
• Set values with setValue() or patchValue().
• Check validity with control.valid and form.valid.
• Call fixture.detectChanges() after changes to update the template.

Key Takeaways

Always import ReactiveFormsModule or FormsModule in your test setup.

Use TestBed to create the component and access form controls for testing.

Set form control values with setValue() and check validity with control.valid.

Call fixture.detectChanges() to update the component after changes.

Avoid testing forms without proper module imports or missing change detection.