angular – Cant bind to formGroup since it isnt a known property of form

angular – Cant bind to formGroup since it isnt 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. Heres 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 Angulars 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 didnt 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 { } 

angular – Cant bind to formGroup since it isnt a known property of form

Ok after some digging I found a solution for Cant bind to formGroup since it isnt a known property of form.

For my case, Ive 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 wasnt 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.