angular: Can't bind to 'formGroup' since it isn't a known property of 'form'

did you import ReactiveFormsModule?

Ok after some digging I found a solution for “Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’.”

For my case, I’ve been using multiple modules files, i added ReactiveFormsModule in app.module.ts

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';`

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

But this wasn’t working when I use a [formGroup] directive from a component added in another module, e.g. using [formGroup] in author.component.ts which is subscribed in author.module.ts file:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { AuthorComponent } from './author.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    AuthorComponent,
  ],
  providers: [...]
})

export class AuthorModule {}

I thought if i added ReactiveFormsModule in app.module.ts, by default ReactiveFormsModule would be inherited by all its children modules like author.module in this case… (wrong!). I needed to import ReactiveFormsModule in author.module.ts in order to make all directives to work:

...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...

@NgModule({
  imports: [
    ...,
    FormsModule,    //added here too
    ReactiveFormsModule //added here too
  ],
  declarations: [...],
  providers: [...]
})

export class AuthorModule {}

So, if you are using submodules, make sure to import ReactiveFormsModule in each submodule file. Hope this helps anyone.

@DzmitryShylovich Sigh. Miraculously, everything today suddenly decided to work. Generated another new project and followed the same steps, no problems. Copied code from yesterday’s project, no problems. ng serve yesterday’s project, no problems. Without making any changes, of course 😃

Never mind I guess. Crisis averted. Thanks anyway though. Should I run into it again, I’ll let you know.

@jorgjanke: Did you declare the ReactiveFormsModule as part of your testing module?

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

The first time I got this error was because I did: [FormGroup] instead of [formGroup] since I was creating it as a new new FormGroup in the component. Making the f lower case fixed it.

@DzmitryShylovich: I did, I mentioned it with the reproduction steps as well.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

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

I had the same trouble as @rjsteinert and @Marcidius. In my spec I had to add the header import as well as the test bed import. Hope it helps.

import { ReactiveFormsModule } from '@angular/forms';

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

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

Hey this issue shouldn’t be closed yet. The same error is being raised with version 2.4.8 and non of your solutions are helping.

Followed @Matfork and it works, must import both FormsModule, ReactiveFormsModule .

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

LIKE A CHARM!!!

I’m in the same boat as @Marcidius

Imports this line in the module, which declared that component.

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

Example: If “login.component.ts” is declared in “login.module.ts”, then in “login.module.ts”,

write this line:

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

Thanks & Regards, Arun Dhwaj

Any solutions to this yet? Running my app is just fine but it’s in the spec files I’m having issues. I’m importing ReactiveFormsModule into the TestBed but still, no dice.

@Matfork

(wrong!).

Yup, there are no global directives. If components use components, directives, or pipes, the module they are part of need to import these components, directives, or pipes.

Only services provided by modules imported to AppModule become available throughout the whole application.

GitHub issues are for bug reports and feature requests. For support questions please use other channels like the ones listed in CONTRIBUTING - Got a Question or Problem?

For making this work you need to import { ReactiveFormsModule, FormsModule } from '@angular/forms';in main app.module.ts. Adding them in submodules won’t work

One solution ist : to use in HTML template I use #formName intead of [FormGroup]="formName"

<form id="userForm" #userForm>
      <input type="text" formControlName="given_name" ... >
      <input type="text" formControlName="family_name" ... >
      <input type="email" formControlName="email" ... >
</form>

app.module.ts

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';`

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

And the component code look like

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

@Component({
    ...
})
export class ProfileComponent implements OnInit {
  // tslint:disable-next-line:no-input-rename
  @Input('formGroup') userForm: FormGroup = new FormGroup({
    given_name: new FormControl(''),
    family_name: new FormControl(''),
    email: new FormControl('', [
      Validators.required,
      Validators.email,
    ])
  });
  ...
}

It works pretty good 💯

@ctscodes You are the true hero!

Update, just found out that the problem was with the spa template I was using. They will be correcting the issue in an update.

The work around is to import FormsModule and ReactiveFormsModue into both the app.module.client and app.module.server.

Issue 986

Let me give some details.

This problem only occurs running Visual Studio 2017 latest Angular 4 template. They’ve got multiple modules for client, server, shared. The only way I got it to work in this envioronment was to import the ReactiveFormsModule directly into the component that needed it and changing [formgroup] to (formgroup)

I just tested installing angular/cli and creating a new project from template and it worked as normally expected.

I would say that the problem is with the Visual Studio template I’m using and the way it has framed up their modules.