Cant bind to formGroup since it isn't a known property of 'form'

Question

I am new to Angular Unit Testing.. I am trying to test a Modal Component and I keep getting the following error: "Can't bind to 'formGroup' since it isn't a known property of 'form'."

I've tried passing FormGroup, FormBuilder, Validators into the test providers (since they are what is being used in the code that I am testing, I added them one at a time and all together), I also tried adding ReactiveFormsModule to it (with the other providers and without them) but continue to get the error.

Like I said I am new to this so be gentle.

Component:

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Benefit } from '../../models/benefit';
import { PolicyBase } from '../../models/policy-base';
import { DatePipe } from '@angular/common';
import { DataService } from '../../services/data-service/data-service';
import { Strings } from '../../models/strings';

@Component({
  selector: 'app-benefit-edit-modal',
  templateUrl: './benefit-edit-modal.component.html',
  styleUrls: ['./benefit-edit-modal.component.css']
})
export class BenefitEditModalComponent implements OnInit, OnChanges {

  @Input() policy: PolicyBase;
  @Input() mainForm: FormGroup;
  @Input() selectedBenefitToChange: Benefit;
  @Input() selectedBenefitToChangeIndex: number;

  headerText: string;
  private isAmountEditAvailable: boolean;

  constructor(private fb: FormBuilder,
      private dataService: DataService) { }

  ngOnInit() {
    this.mainForm.addControl('changeBenefitModalForm', this.fb.group({
      benefitType: [''],
      amount: [''],
      issueDate: [''],
      ceaseAge: ['']
    })) ;
  }

Component.Spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { FormGroup, FormBuilder, Validators, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
import { AppRoutingModule } from 'src/app/app-routing.module';

import { BenefitMock } from '../../mock-components/mock-models.ts/benefit-mock';
import { Benefit } from '../../models/benefit';
import { PolicyBase } from '../../models/policy-base';
import { DataService } from '../../services/data-service/data-service';
import { Strings } from '../../models/strings';
import { BenefitEditModalComponent } from './benefit-edit-modal.component';
import { DataServiceHelper } from '../../services/data-service/data-service-helper';
import { AlertService } from '../../services/alert-service.service';
import {WindowRef} from '../../services/window-ref-service';
import { APP_BASE_HREF } from '@angular/common';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ 
        BenefitEditModalComponent
      ],
      imports: [
        HttpClientModule, 
        RouterTestingModule,
        Ng4LoadingSpinnerModule,
      ],
      providers: [
        DataService, 
        DataServiceHelper, 
        AlertService,
        FormGroup,
        FormBuilder,
        Validators,
        {provide: APP_BASE_HREF, useValue: '/inforceillustrations/'}, WindowRef
      ],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BenefitEditModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  })

  it('should create', () => {
    expect(component).toBeDefined();
  });
});

In app.module.ts we import FormsModule and ReactiveFormsModule and export ReactiveFormsModule... if that makes a difference.

App works fine, this is isolated to the unit test.

I meantioned that we do import FormsModule and ReactiveFormsModule in app module ts — Taylor Belk

gunjit gunjit · Accepted Answer · 2019-04-30T17:13:24

You have to import ReactiveFormsModule in imports array:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ 
        BenefitEditModalComponent
      ],
      imports: [
        HttpClientModule, 
        RouterTestingModule,
        Ng4LoadingSpinnerModule,
        ReactiveFormsModule       // <---- this line
      ],
      providers: [
        DataService, 
        DataServiceHelper, 
        AlertService,
        FormGroup,
        FormBuilder,
        Validators,
        {provide: APP_BASE_HREF, useValue: '/inforceillustrations/'}, WindowRef
      ],
    })
    .compileComponents();
  }));

Cant bind to formGroup since it isn't a known property of 'form'

1 Answers