Can't bind to 'formGroup' since it isn't a known property of 'form'
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.
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.
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.