Bdtjtk

Angular 4 in combination with feature modules (if you are for instance using a shared-module) requires you to also export the ReactiveFormsModule to work.

import { NgModule }                                 from '@angular/core';

import { CommonModule }                             from '@angular/common';

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



@NgModule({

  imports:      [

    CommonModule,

    ReactiveFormsModule

  ],

  declarations: ,

  exports: [

    CommonModule,

    FormsModule,

    ReactiveFormsModule

  ]

})

export class SharedModule { } 

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.

I have encountered this error during unit testing of a component (only during testing, within application it worked normally). The solution is to import ReactiveFormsModule in .spec.ts file:

// Import module

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



describe('MyComponent', () => {

    beforeEach(async(() => {

        TestBed.configureTestingModule({

            declarations: [MyComponent],

            imports: [ReactiveFormsModule],  // Also add it to 'imports' array

        })

        .compileComponents();

    }));

});

The suggested answer did not work for me with Angular 4. Instead I had to use another way of attribute binding with the attr prefix:

<element [attr.attribute-to-bind]="someValue">

If you have to import two modules then add like this below

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

@NgModule({

  declarations: [

    AppComponent,

    HomeComponentComponent,

    BlogComponentComponent,

    ContactComponentComponent,

    HeaderComponentComponent,

    FooterComponentComponent,

    RegisterComponent,

    LoginComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

    routes,

    ReactiveFormsModule

  ],

  providers: ,

  bootstrap: [AppComponent]

})

Keep in mind that if you have defined "Feature Modules", you'll need to import in the Feature Module, even if you already imported to the AppModule. From the Angular documentation:

Modules don't inherit access to the components, directives, or pipes that are declared in other modules. What AppModule imports is irrelevant to ContactModule and vice versa. Before ContactComponent can bind with [(ngModel)], its ContactModule must import FormsModule.

https://angular.io/docs/ts/latest/guide/ngmodule.html

I had the same issue with Angular 7. Just import following in your app.module.ts file.

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

Then add FormsModule and ReactiveFormsModule in to your imports array.

imports: [

  FormsModule,

  ReactiveFormsModule

],

This problem occurs due to missing import of FormsModule,ReactiveFormsModule .I also came with same problem.
My case was diff. as i was working with modules.So i missed above imports in my parent modules though i had imported it into child modules,it wasn't working.

Then i imported it into my parent modules as below, and it worked!

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

import { AlertModule } from 'ngx-bootstrap';



         @NgModule({

          imports: [

            CommonModule,

            FormsModule,

            ReactiveFormsModule,

    ],

      declarations: [MyComponent]

    })

For people strolling these threads about this error. In my case I had a shared module where I only exported the FormsModule and ReactiveFormsModule and forgot to import it. This caused a strange error that formgroups were not working in sub components. Hope this helps people scratching their heads.

I was coming across this error when trying to do e2e testing and it was driving me crazy that there were no answers to this.

IF YOU ARE DOING TESTING, find your *.specs.ts file and add :

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

A LITTLE NOTE: Be careful about loaders and minimize (Rails env.):

After seeing this error and trying every solution out there, i realised there was something wrong with my html loader.

I've set my Rails environment up to import HTML paths for my components successfully with this loader (config/loaders/html.js.):

module.exports = {

  test: /.html$/,

  use: [ {

    loader: 'html-loader?exportAsEs6Default',

    options: {

      minimize: true

    }

  }]

}

After some hours efforts and countless of ReactiveFormsModule imports i saw that my formGroup was small letters: formgroup.

This led me to the loader and the fact that it downcased my HTML on minimize.

After changing the options, everything worked as it should, and i could go back to crying again.

I know that this is not an answer to the question, but for future Rails visitors (and other with custom loaders) i think this could be helpfull.

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

means that you try to bind a property using angular ([prop]) but angular cant find anything he knows for that element (in this case form).

this can happen by not using the right module (missing an import somewhere in the way) and sometimes just cause a typo like:

[formsGroup], with s after form