Can't bind to 'formGroup' since it isn't a known property of 'form'
AngularTypescriptAngular2 FormsAngular Problem Overview
The situation
I am trying to make what should be a very simple form in my Angular application, but no matter what, it never works.
The Angular version
Angular 2.0.0 RC5
The error
> Can't bind to 'formGroup' since it isn't a known property of 'form'
The code
The view
<form [formGroup]="newTaskForm" (submit)="createNewTask()">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" required>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
The controller
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';
@Component({
selector: 'task-add',
templateUrl: 'app/task-add.component.html'
})
export class TaskAddComponent {
newTaskForm: FormGroup;
constructor(fb: FormBuilder)
{
this.newTaskForm = fb.group({
name: ["", Validators.required]
});
}
createNewTask()
{
console.log(this.newTaskForm.value)
}
}
The ngModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { TaskService } from './task.service'
@NgModule({
imports: [
BrowserModule,
routing,
FormsModule
],
declarations: [ AppComponent ],
providers: [
TaskService
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
The question
Why am I getting that error? Am I missing something?
Angular Solutions
Solution 1 - Angular
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.
Solution 2 - Angular
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 { }
Solution 3 - Angular
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.
Solution 4 - Angular
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();
}));
});
Solution 5 - Angular
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">
Solution 6 - Angular
The error says that FormGroup is not recognized in this module. So you have to import these (below) modules in every module that uses FormGroup
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
Then add FormsModule and ReactiveFormsModule into your Module's imports array.
imports: [
FormsModule,
ReactiveFormsModule
],
You may be thinking that I have already added it in AppModule and it should inherit from it? But it is not. Because these modules are exporting required directives that are available only in importing modules. Read more in Sharing modules.
Other factors for these errors may be be a spelling error like below...
[FormGroup]="form" Capital F instead of small f
[formsGroup]="form" Extra s after form
Solution 7 - Angular
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]
})
Solution 8 - Angular
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.
Solution 9 - Angular
Firstly, it is not related to Angular versions>2. Just import the following in your app.module.ts file will fix the problems.
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
Then add FormsModule and ReactiveFormsModule into your imports array.
imports: [
FormsModule,
ReactiveFormsModule
],
Note: You can also import ReactiveFormsModule
to a specific module instead to app.module.ts
Solution 10 - Angular
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
],
Solution 11 - Angular
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]
})
Solution 12 - Angular
-
Your Angular version is 11+, and you use VisualStudioCode?
-
And you have already imported
FormsModule
,ReactiveFormsModule
and added it into your imports-section within e.g.app.module.ts
(relevant module can be different, choose the right one):
// app.module.ts (excerpt)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
imports: [
...
FormsModule,
ReactiveFormsModule,
...
],
- You have the right imports (sometimes there are other libs with similar names); you have defined and initialized your form in your component?
// MyWonderfulComponent (excerpt)
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class MyWonderfulComponent implements OnInit {
form: FormGroup;
...
constructor (private fb: FormBuilder) {
this.form = this.fb.group({
// DON'T FORGET THE FORM INITIALISATION
});
}
- Your Component-Template has your form:
<form [formGroup]="form" (ngSubmit)="submit()">
<!-- MY FORM CONTROLS ARE ALREADY HERE -->
</form>
- And you still get the error message "...since it isn't a known property of..." ?
then just simple restart your VisualStudioCode :)
Solution 13 - Angular
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';
Solution 14 - Angular
Don't be a dumb dumb like me. I was getting the same error as above, and none of the options in previous answers worked. Then I realized I capitalized 'F' in FormGroup
. Doh!
Instead of:
[FormGroup]="form"
Do:
[formGroup]="form"
Solution 15 - Angular
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.
Solution 16 - Angular
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.
Solution 17 - Angular
Import and register ReactiveFormsModule in your app.module.ts.
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Make sure your spelling is correct in both .ts and .html file. xxx.ts
profileForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl('')
});
xxx.html file-
<form [formGroup]="profileForm">
<label>
First Name:
<input type="text" formControlName = "firstName">
</label>
<label>
Last Name:
<input type="text" formControlName = "lastName">
</label>
</form>
I was by mistake wrote [FormGroup] insted of [formGroup]. Check your spelling correctly in .html. It doesn't throw compile time error If anything wrong in .html file.
Solution 18 - Angular
If you have this problem when you are developing a component, you should add these two modules to your closest module:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
// other modules
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
And if you are developing a test for your components so you should add this module to your test file like this:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactusComponent } from './contactus.component';
import { ReactiveFormsModule } from '@angular/forms';
describe('ContactusComponent', () => {
let component: ContactusComponent;
let fixture: ComponentFixture<ContactusComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ContactusComponent],
imports:[
ReactiveFormsModule
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ContactusComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
Solution 19 - Angular
Simple solution:
Step 1: Import ReactiveFormModule
import {ReactiveFormsModule} from '@angular/forms';
Step 2: Add "ReactiveFormsModule" to the import section
imports: [
ReactiveFormsModule
]
Step 3: Restart the application and done
Example:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import { EscalationManagementRoutingModule } from './escalation-management-routing.module';
import { EscalationManagementRouteWrapperComponent } from './escalation-management-route-wrapper.component';
@NgModule({
declarations: [EscalationManagementRouteWrapperComponent],
imports: [
CommonModule,
EscalationManagementRoutingModule,
ReactiveFormsModule
]
})
export class EscalationManagementModule { }
Solution 20 - Angular
The ReactiveFormsModule
and FormsModule
import should be added in your custom component module and also its parent component from where it is getting called.
For example, I needed to add form for my filter component. So I should add this import in my filter module and its parent page (might be list) module from where this filter button gets clicked.
Solution 21 - Angular
Using and import REACTIVE_FORM_DIRECTIVES:
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 { }
Solution 22 - Angular
Note: if you are working inside child module's component, then you just have to import ReactiveFormsModule
in child module rather than parent app root module.
Solution 23 - Angular
Import ReactiveFormsModule in the corresponding module.
Solution 24 - Angular
If this is just a TypeScript error but everything on your form works, you may just have to restart your IDE.
Solution 25 - Angular
I had the same problem. Make sure that if using submodules (for example, you not only have app.component.module.ts), but you have a separate component such as login.module.ts, that you include ReactiveFormsModule import in this login.module.ts import, for it to work. I don't even have to import ReactiveFormsModule in my app.component.module, because I'm using submodules for everything.
File login.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { LoginPageRoutingModule } from './login-routing.module';
import { LoginPage } from './login.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule,
LoginPageRoutingModule
],
declarations: [LoginPage]
})
export class LoginPageModule {}
Solution 26 - Angular
I tried almost all the solution here but my problem was a little different(stupid). I added the component in routing module but didn't include it main module. So make sure your component is part of the module.
Solution 27 - Angular
When you have a formGroup in a modal (entrycomponent), then you have to import ReactiveFormsModule also in the module where the modal is instantiated.
Solution 28 - Angular
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; and add it in imports array in the app-module.ts file.
Solution 29 - Angular
You can get this error message even if you have already imported FormsModule
and ReactiveFormsModule
. I moved a component (that uses the [formGroup]
directive) from one project to another, but failed to add the component to the declarations
array in the new module. That resulted in the Can't bind to 'formGroup' since it isn't a known property of 'form'
error message.
Solution 30 - Angular
I've been struggling with this error during the last 3 days. I added the ReactiveFormsModule and FormsModule as mentionned in the comments above in both of my modules but it had no effect until I reloaded my project with another "ng serve". I don't know why it didn't reload automatically but at least i'm glad it worked finally! Any explanation please?
Solution 31 - Angular
You need to import the FormsModule
, ReactiveFormsModule
in this module as well as the top level.
If you used a reactiveForm
in another module then you've to do also this step along with above step: import also reactiveFormsModule
in that particular module.
For example:
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule
],
Solution 32 - Angular
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
Solution 33 - Angular
import below line in app.modual.ts file and run command ng s -o
in angular cli.
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
Solution 34 - Angular
Three main points we have to focus on if encountered such types of issues.
- Import
ReactiveFormsModule, FormsModule
in any shared or app module. - If you created a shared module then import that into a module on which you are using the form group and
- check that component is in
declarations: [ ProjectComponent ]
like this.
Solution 35 - Angular
My solution was subtle and I didn't see it listed already.
I was using reactive forms in an Angular Materials Dialog component that wasn't declared in app.module.ts
. The main component was declared in app.module.ts
and would open the dialog component but the dialog component was not explicitly declared in app.module.ts
.
I didn't have any problems using the dialog component normally except that the form threw this error whenever I opened the dialog:
> Can't bind to 'formGroup' since it isn't a known property of 'form'.
Solution 36 - Angular
I had the same issue and the problem was in fact only that I forgot to import and declare the component which holds the form in the module:
import { ContactFormComponent } from './contact-form/contact-form.component';
@NgModule({
declarations: [..., ContactFormComponent, ...],
imports: [CommonModule, HomeRoutingModule, SharedModule]
})
export class HomeModule {}
Solution 37 - Angular
You need to import the FormsModule, ReactiveFormsModule in this module
If you used a reactiveForm in another module then you've to do also this step along with above step: import also reactiveFormsModule in that particular module.
For example:
imports: [
FormsModule,
ReactiveFormsModule,
],
Solution 38 - Angular
I did not see this particular failure mechanism described here or any reference to public-api.ts
elsewhere within this issue, so adding it in case it helps someone else.
I have a component built using Reactive Forms inside a feature module. Following the guidance described in other answers, my module built without issue UNTIL I attempted to export the component via public-api.ts
. At that point, I began to get the familiar error Can't bind to 'formGroup' since it isn't a known property of 'form'
, with no other indication what might be wrong.
This issue occurred for me at this point because I forgot to declare and export the component from the NgModule
. Once I added it there, the module began to build again. So, three things to remember in the NgModule
when attempting to export a Reactive Forms component:
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MyExportedComponent } from './components/my-exported.component';
@NgModule({
declarations: [
MyExportedComponent // this
],
imports: [
ReactiveFormsModule // this
],
exports: [
MyExportedComponent // and this
],
providers: [
]
})
export class MyModule { }
At which point, Angular will play nice with this line in public-api.ts
:
export * from './lib/my-module/components/my-exported.component';
Solution 39 - Angular
If,
Already Imported
import { FormsModule, ReactiveFormsModule } from '@angular/forms';`
in rootModule & customComponentModule & still getting the error
> NG8002: Can't bind to 'formGroup' since it isn't a known property of
> 'form'
just,
> Restart you Application server
this will solve the issue
Solution 40 - Angular
You can import formModule and reactiveFormModule
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
ContactComponent
],
imports: [
CommonModule,
ContactRoutingModule,
FormsModule,
ReactiveFormsModule
]
})
export class ContactModule { }
Solution 41 - Angular
Say you have structured your app like below:
AnotherModule
<your_form>
AppModule
Import ReactiveFormsModule
or FormsModule
in AnotherModule
based on your form type.
Make sure AnotherModule
is imported in AppModule
.