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

RC6/RC7/Final release FIX

To fix this error, you just need to import ReactiveFormsModule from @angular/forms in your module. Here's the example of a basic module with ReactiveFormsModule import:

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule, ReactiveFormsModule } from '@angular/forms';import { AppComponent }  from './app.component';@NgModule({    imports: [        BrowserModule,        FormsModule,        ReactiveFormsModule    ],    declarations: [        AppComponent    ],    bootstrap: [AppComponent]})export class AppModule { }

To explain further, formGroup is a selector for directive named FormGroupDirective that is a part of ReactiveFormsModule, hence the need to import it. It is used to bind an existing FormGroup to a DOM element. You can read more about it on Angular's official docs page.

RC5 FIX

You need to import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' in your controller and add it to directives in @Component. That will fix the problem.

After you fix that, you will probably get another error because you didn't add formControlName="name" to your input in form.

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.