Can't bind to 'formGroup' since it isn't a known property of 'form' #14288

JPtenBerge · 2017-02-03T19:50:48Z

I'm submitting a ...

[x] bug report
[ ] feature request
[ ] support request

Current behavior
Simply using the [formGroup] directive when everything has been setup properly results in the error above.

Expected behavior
The formGroup was one of the most basic directives to use when working with Reactive Forms. It tied a form element to the definition of the form (residing in a component). I expect no error. I've used [formGroup] since 2.0.0-RC5 (I think) and the documentation still says it should work like this, but it doesn't.

Minimal reproduction of the problem with instructions

Using @angular/cli, create a new project.
In app.module.ts, change FormsModule to ReactiveFormsModule (two places).

In app.component,html, add this form HTML:

<form [formGroup]="myForm">
  Naam: <input type="text" formControlName="name"><br>
  Age: <input type="number" formControlName="age">

  <button>Save</button>
</form>

app.component.ts:

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

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
	myForm: FormGroup;

	constructor(private fb: FormBuilder) { }

	ngOnInit() {
		this.myForm = this.fb.group({
			name: ['', Validators.required],
			age: ['', Validators.required]
		});
	}
}

Running the application will now result in the error: Can't bind to 'formGroup' since it isn't a known property of 'form'.

What is the motivation / use case for changing the behavior?
Basic reactive forms are not working properly anymore.

Please tell us about your environment:
Windows 10 64 bit. Created the project with @angular/cli v1.0.0-beta.30

Angular version: 2.3.1 (latest)
Browser: all: Chrome 55, Firefox, Internet Explorer 11, Edge 38
Language: TypeScript 2.0.3
Node (for AoT issues): node --version = 7.5.0

The text was updated successfully, but these errors were encountered:

DzmitryShylovich · 2017-02-03T19:55:47Z

did you import ReactiveFormsModule?

JPtenBerge · 2017-02-03T19:56:39Z

@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 { }

DzmitryShylovich · 2017-02-03T20:08:23Z

Pls add a plunkr with repro

JPtenBerge · 2017-02-03T20:32:05Z

Ï will, out of time at the moment though, I will add it first thing tomorrow morning. You haven't been able to repro it with angular-cli at your end then?

DzmitryShylovich · 2017-02-03T20:39:15Z

Nope, I can't reproduce using cli

jorgjanke · 2017-02-04T07:08:27Z

works for me using the latest version with the cli - nevertheless, ng-test fails with that very same error - I tried to stub it, but no change - any hints?

JPtenBerge · 2017-02-04T23:02:48Z

@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: [...]
	});
});

DzmitryShylovich · 2017-02-04T23:06:02Z

@JPtenBerge 👍 close the issue then pls. thx

johnnycamby · 2017-02-22T17:55:04Z

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.

Matfork · 2017-02-24T20:31:10Z

Im getting the same error in version 2.4.8

component.ts file seems to recongnize FormGroup, FormControl, FormBuilder, Validators, but using [formGroup] inside component.html file throws same error:

"Can't bind to 'formGroup' since it isn't a known property of 'form'."

rienk-git · 2017-02-26T03:47:03Z

Getting the same problem with 2.4.8.

After some debugging/trial and error I found that Validators are breaking my code:

This throws the 'Can't bind to 'formGroup' since it isn't a known property of 'form'' - error:

let emailRegex = `([a-zA-Z0-9_.]{1}[a-zA-Z0-9_.]*)((@[a-zA-Z]{2}[a-zA-Z]*)[\\\.]([a-zA-Z]{2}|[a-zA-Z]{3}))`;
this.form = Form.group({
            email: ['', [Validators.required, Validators.pattern(emailRegex)]],
 })

while this does not throw an error:

this.form = Form.group({
            email: ['', [Validators.required]],
 })

So there seems to be a change in way validators are passed or some methods are no longer available or something. The error is very vague and only exposes itself as a template parse error.

I will check the latest docs on validation though.

Matfork · 2017-02-26T04:06:14Z

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.

zoechi · 2017-02-27T07:15:40Z

@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?

tsureshpandi · 2017-03-07T14:58:36Z

After upgrading angular2 to new version i face similar issue.

After lot of changes i got it to work by updating the followings in src/polyfills.ts file.
(by default new angular cli commented these lines, i compare with my old project & update required.)

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

Marcidius · 2017-05-24T12:17:32Z

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.

k11k2 · 2017-05-30T06:29:28Z

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

rjcorwin · 2017-06-01T17:50:14Z

I'm in the same boat as @Marcidius

Phillippe43 · 2017-06-06T16:24:51Z

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.

Phillippe43 · 2017-06-07T15:37:53Z

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

meetkabeershah · 2017-06-16T20:51:48Z

changing [formgroup] to (formgroup)

@Phillippe43 by doing this, you're changing property binding to event binding which changes the purpose in whole

roshan3133 · 2017-07-14T12:14:47Z

Getting same error in Angular 4.2.1 also
i have used added in app.module.ts as well as in component still i am getting same error.

vnussolution · 2017-07-26T18:29:50Z

First check, make sure to import FormsModule, ReactiveFormsModule to @NgModule.
Thanks @Matfork , your solution works for me

sebichondo · 2017-08-02T12:25:07Z

@Phillippe43 Thanks, adding the import to both the app.module.client and app.module.server worked for me

hodglem · 2017-08-08T14:27:05Z

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();
  }));

bgies · 2018-01-27T07:07:50Z

I know this is very late, but I found this issue while searching for an answer to binding properties for custom components in a shared module.

In my case the problem was that my lazy loaded page was still included in the app.module.ts file. Removing that fixed the Can't bind to 'xxx' since it isn't a known property.

Just putting this up for anyone else facing the same issue. It's really just the error message has nothing to do with the actual solution.

granteagon · 2018-01-30T16:30:01Z

I had this also. I had to manually refresh the page after adding ReactiveFormsModule to the imports for my module before I could see the change. LiveReload didn't work.

SmartBitPixel · 2018-04-17T12:49:54Z

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

christsantiris · 2018-05-20T17:38:30Z

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.

Fernandolcs · 2018-06-21T22:50:05Z

@ctscodes You are the true hero!

Martinspire · 2018-08-23T12:11:00Z

So why is [form-group] not allowed as an attribute value (making the attribute dashed and lowercase). I thought that would be the same as [formGroup] but apparently the error pops up too if you try it

munapadhi · 2018-09-12T21:29:54Z

ctscodes replays awasome that also works for me thanks ctscodes:)

Riyaz0001 · 2018-10-07T20:47:10Z

same problem here.

victorienfotsing · 2018-10-14T22:42:30Z

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 💯

somvanshi-nitesh · 2018-11-07T18:59:14Z

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

ItsAncientCoder · 2018-12-27T06:22:56Z

2. ReactiveFormsModule

your answer worked partially in my case.
When i use only 'ReactiveFormsModule', it was giving
"NO provider error'. I have imported both 'FormsModule' and 'ReactiveFormsModule', it started working. Thank you. happy learning.

metasimian · 2019-01-30T07:43:05Z

So fiddling around with the same frustrating issue -- a clean angular-cli install and a custom subcomponent/module (component.html... <form [formGroup]="demoForm" (ngSubmit)="onSubmit()">) and the same error ("Can't bind to 'formGroup' since it isn't a known property of 'form' ").
Angular CLI: 7.2.3, Node: 10.9.0, OS: win32 x64, Angular: 7.2.2

I finally got it to work based on the above but with a twist
I put the FormsModule & ReactiveFormsModule imports in app-routing.module.ts (not app.module.ts) + the subcomponent's ts (in my case: forms-demo.component.ts) :

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
....
@NgModule({
  imports: [
    RouterModule.forRoot(routes), 
  	FormsModule, ReactiveFormsModule
....

Afterward ng build/serve worked without any errors.

I'm not an Angular expert but my guess is that the v7 approach whereby app.module.ts delegates to app-routing, that latter file is where the app & component imports & dependencies take place.... YMMV but hopefully it helps.

NicolasPapp94 · 2019-03-19T14:38:00Z

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

LIKE A CHARM!!!!

Yurzs · 2019-05-19T14:55:32Z

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

sharmarajat01 · 2019-06-27T19:26:26Z

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.

lol !! you were the one who dropped out this same comment on stack overflow :p

dprice000 · 2019-08-10T18:36:28Z

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.

This helped me. I created my app with AppRouting. It looks like all of the components are created by the AppRouting Module. I had to add ReactiveFormsModule to the AppRouting Module.

angular-automatic-lock-bot · 2019-09-15T09:51:58Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

JPtenBerge closed this as completed Feb 4, 2017

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 15, 2019

Can't bind to 'formGroup' since it isn't a known property of 'form' #14288

Can't bind to 'formGroup' since it isn't a known property of 'form' #14288

Comments

JPtenBerge commented Feb 3, 2017 • edited Loading

DzmitryShylovich commented Feb 3, 2017

JPtenBerge commented Feb 3, 2017 • edited Loading

DzmitryShylovich commented Feb 3, 2017

JPtenBerge commented Feb 3, 2017

DzmitryShylovich commented Feb 3, 2017

jorgjanke commented Feb 4, 2017

JPtenBerge commented Feb 4, 2017 • edited Loading

DzmitryShylovich commented Feb 4, 2017

johnnycamby commented Feb 22, 2017

Matfork commented Feb 24, 2017 • edited Loading

rienk-git commented Feb 26, 2017

Matfork commented Feb 26, 2017 • edited Loading

zoechi commented Feb 27, 2017

tsureshpandi commented Mar 7, 2017

Marcidius commented May 24, 2017

k11k2 commented May 30, 2017 • edited Loading

rjcorwin commented Jun 1, 2017

Phillippe43 commented Jun 6, 2017 • edited Loading

Phillippe43 commented Jun 7, 2017 • edited Loading

meetkabeershah commented Jun 16, 2017 • edited Loading

roshan3133 commented Jul 14, 2017

vnussolution commented Jul 26, 2017

sebichondo commented Aug 2, 2017

hodglem commented Aug 8, 2017 • edited Loading

bgies commented Jan 27, 2018 • edited Loading

granteagon commented Jan 30, 2018 • edited Loading

SmartBitPixel commented Apr 17, 2018

christsantiris commented May 20, 2018

Fernandolcs commented Jun 21, 2018

Martinspire commented Aug 23, 2018

munapadhi commented Sep 12, 2018

Riyaz0001 commented Oct 7, 2018

victorienfotsing commented Oct 14, 2018

somvanshi-nitesh commented Nov 7, 2018

ItsAncientCoder commented Dec 27, 2018

metasimian commented Jan 30, 2019

NicolasPapp94 commented Mar 19, 2019

Yurzs commented May 19, 2019 • edited Loading

sharmarajat01 commented Jun 27, 2019

dprice000 commented Aug 10, 2019

angular-automatic-lock-bot bot commented Sep 15, 2019

JPtenBerge commented Feb 3, 2017 •

edited

Loading

JPtenBerge commented Feb 3, 2017 •

edited

Loading

JPtenBerge commented Feb 4, 2017 •

edited

Loading

Matfork commented Feb 24, 2017 •

edited

Loading

Matfork commented Feb 26, 2017 •

edited

Loading

k11k2 commented May 30, 2017 •

edited

Loading

Phillippe43 commented Jun 6, 2017 •

edited

Loading

Phillippe43 commented Jun 7, 2017 •

edited

Loading

meetkabeershah commented Jun 16, 2017 •

edited

Loading

hodglem commented Aug 8, 2017 •

edited

Loading

bgies commented Jan 27, 2018 •

edited

Loading

granteagon commented Jan 30, 2018 •

edited

Loading

Yurzs commented May 19, 2019 •

edited

Loading