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

[JPtenBerge]

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

1. Using @angular/cli, create a new project.
2. In app.module.ts, change FormsModule to ReactiveFormsModule (two places).
3. 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>
   

4. 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

[DzmitryShylovich]

did you import ReactiveFormsModule?

[JPtenBerge]

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

Pls add a plunkr with repro

[JPtenBerge]

Ï 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]

Nope, I can't reproduce using cli

[jorgjanke]

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]

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

@JPtenBerge 👍 close the issue then pls. thx

[johnnycamby]

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]

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]

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]

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]

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

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';