Can't bind to 'ngModel' since it isn't a known property of 'input'
JavascriptAngularTypescriptInputJavascript Problem Overview
I have this simple input in my component which uses [(ngModel)]
:
<input type="text" [(ngModel)]="test" placeholder="foo" />
And I get the following error when I launch my app, even if the component is not displayed.
>zone.js:461 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'.
Here is the component.ts:
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';
@Component({
selector: 'intervention-details',
templateUrl: 'app/intervention/details/intervention.details.html',
styleUrls: ['app/intervention/details/intervention.details.css']
})
export class InterventionDetails
{
@Input() intervention: Intervention;
public test : string = "toto";
}
Javascript Solutions
Solution 1 - Javascript
Yes, that's it. In the app.module.ts file, I just added:
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
Solution 2 - Javascript
In order to be able to use two-way data binding for form inputs you need to import the FormsModule
package in your Angular module.
For more information, see the Angular 2 official tutorial here and the official documentation for forms.
Solution 3 - Javascript
For using [(ngModel)]
in Angular 2, 4 & 5+, you need to import FormsModule from Angular form...
Also, it is in this path under forms in the Angular repository on GitHub:
> angular / packages / forms / src / directives / ng_model.ts
Probably this is not a very pleasurable for the AngularJS developers as you could use ng-model everywhere anytime before, but as Angular tries to separate modules to use whatever you'd like you to want to use at the time, ngModel is in FormsModule now.
Also, if you are using ReactiveFormsModule it needs to import it too.
So simply look for app.module.ts and make sure you have FormsModule
imported in...
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <<<< import it here
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, FormsModule // <<<< And here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Also, these are the current starting comments for Angular4 ngModel
in FormsModule:
/**
* `ngModel` forces an additional change detection run when its inputs change:
* E.g.:
* ```
* <div>{{myModel.valid}}</div>
* <input [(ngModel)]="myValue" #myModel="ngModel">
* ```
* I.e. `ngModel` can export itself on the element and then be used in the template.
* Normally, this would result in expressions before the `input` that use the exported directive
* to have and old value as they have been
* dirty checked before. As this is a very common case for `ngModel`, we added this second change
* detection run.
*
* Notes:
* - this is just one extra run no matter how many `ngModel` have been changed.
* - this is a general problem when using `exportAs` for directives!
*/
If you'd like to use your input, not in a form, you can use it with ngModelOptions
and make standalone true...
[ngModelOptions]="{standalone: true}"
For more information, look at ng_model in the Angular section here.
Solution 4 - Javascript
You need to import the FormsModule.
Open app.module.ts and add the lines
import { FormsModule } from '@angular/forms';
and
@NgModule({
imports: [
FormsModule
],
})
Solution 5 - Javascript
Assuming you have created a new NgModule, say AuthModule
dedicated to handling your authentication needs, make sure to import FormsModule
in that AuthModule too.
If you'll be using the FormsModule
only in the AuthModule
then you wouldn't need to import the FormModule
in the default AppModule
.
So something like this in the AuthModule
:
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';
@NgModule({
imports: [
authRouting,
FormsModule
],
declarations: [
SignupComponent,
LoginComponent
]
})
export class AuthModule { }
Then forget about importing in AppModule
if you don't use the FormsModule
anywhere else.
Solution 6 - Javascript
ngModel is the part of FormsModule. And it should be imported from @angular/forms to work with ngModel.
Please change the app.module.ts as follow:
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
Solution 7 - Javascript
You need to import the FormsModule
.
Open app.module.ts and add the lines
import { FormsModule } from '@angular/forms';
and
@NgModule({
imports: [
FormsModule
],
})
Solution 8 - Javascript
Simple solution: In file app.module.ts -
Example 1
import {FormsModule} from "@angular/forms";
// Add in imports
imports: [
BrowserModule,
FormsModule
],
Example 2
If you want to use [(ngModel)] then you have to import FormsModule in app.module.ts:
import { FormsModule } from "@angular/forms";
@NgModule({
declarations: [
AppComponent, videoComponent, tagDirective,
],
imports: [
BrowserModule, FormsModule
],
providers: [ApiServices],
bootstrap: [AppComponent]
})
export class AppModule { }
Solution 9 - Javascript
Solution 10 - Javascript
There are two steps you need to follow to get rid of this error:
- import FormsModule in your app module
- Pass it as value of imports in @NgModule decorator
Basically, file app.module.ts should look like below:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import {AppChildComponent} from './appchild.component';
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ AppComponent, AppChildComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Solution 11 - Javascript
Sometimes, even though we are already imported BrowserModule
, FormsModule
and other related modules, we still may get the same error.
Then I realized that we need to import them in order, which is missed in my case. So the order should be like BrowserModule
, FormsModule
, and ReactiveFormsModule
.
As per my understanding, feature modules should follow the basic modules of Angular.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule {}
Solution 12 - Javascript
I am using Angular 7.
I have to import ReactiveFormsModule, because I am using the FormBuilder class to create a reactive form.
import {
FormsModule,
ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
], declarations: []})
Solution 13 - Javascript
You need to import FormsModule in your root module if this component is in the root i.e. app.module.ts
Kindly open app.module.ts
Import FormsModule from @angular/forms
Ex:
import { FormsModule } from '@angular/forms';
and
@NgModule({
imports: [
FormsModule
],
})
Solution 14 - Javascript
Import FormsModule in you app module.
It would let your application run well.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,ContactListCopmponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Solution 15 - Javascript
If you need to use [(ngModel)]
first, you need to import FormsModule
in app.module.ts
and then add in a list of imports. Something like this:
File app.module.ts
- import
import {FormsModule} from "@angular/forms";
- add in imports
imports: [ BrowserModule, FormsModule ],
File app.component.ts
- Example:
<input type="text" [(ngModel)]="name" >
- and then
<h1>your name is: {{name}} </h1>
Solution 16 - Javascript
I'm using Angular 5.
In my case, I needed to import ReactiveFormsModule too.
File app.module.ts (or anymodule.module.ts):
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
Solution 17 - Javascript
If someone is still getting errors after applying the accepted solution, it could be possibly because you have a separate module file for the component in which you want to use the ngModel property in input tag. In that case, apply the accepted solution in the component's module.ts file as well.
Solution 18 - Javascript
I know this question is about Angular 2, but I am on Angular 4 and none of these answers helped.
In Angular 4 the syntax needs to be
[(ngModel)]
Solution 19 - Javascript
If you are still getting the error after importing FormsModule correctly then check in your terminal or (windows console) because your project is not compiling (because of another error that could be anything) and your solution has not been reflected in your browser!
In my case, my console had the following unrelated error:
> Property 'retrieveGithubUser' does not exist on type 'ApiService'.
Solution 20 - Javascript
Import FormModule in file app.module
import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })
Solution 21 - Javascript
In the module you are willing to use ngModel you have to import FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
],
})
export class AbcModule { }
Solution 22 - Javascript
ngModel is coming from FormsModule. There are some cases when you can receive this kind of error:
- You didn't import the FormsModule into the import array of modules where your component is declared - the component in which the ngModel is used.
- You have import the FormsModule into one module which is inherited of another module. In this case you have two options:
-
let the FormsModule be imported into the import array from both modules:module1 and module2. As the rule: Importing a module does not provide access to its imported modules. (Imports are not inherited)
-
declare the FormsModule into the import and export arrays in module1 to be able to see it in model2 also
Solution 23 - Javascript
In ngModule
you need to import FormsModule
, because ngModel
is coming from FormsModule
.
Please modify your app.module.ts like the below code I have shared
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
Solution 24 - Javascript
ngModel should be imported from @angular/forms because it is the part of FormsModule. So I advice you to change your app.module.ts in something like this:
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
Solution 25 - Javascript
For my scenario, I had to import both [CommonModule] and [FormsModule] to my module
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MyComponent } from './mycomponent'
@NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [
MyComponent
]
})
export class MyModule { }
Solution 26 - Javascript
You need to import the FormsModule in app.module.ts and add the lines
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
]
})
The ngModel directive declared in the FormsModule lets you bind controls in your template-driven form to properties in your data model. When you include the directive using the syntax for two-way data binding, [(ngModel)], Angular can track the value and user interaction of the control and keep the view synced with the model.
Solution 27 - Javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Solution 28 - Javascript
You need to import the FormsModule.
#Open app.module.ts
#add the lines
import { FormsModule } from '@angular/forms';
and
@NgModule({
imports: [
FormsModule <--------add this
],
})
if you are using reactive form then also added ReactiveFormsModule
Solution 29 - Javascript
Sometimes you get this error when you try to use a component from a module, which is not shared, in a different module.
For example, you have 2 modules with module1.componentA.component.ts and module2.componentC.component.ts and you try to use the selector from module1.componentA.component.ts in a template inside module2 (e.g. <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">
), it will throw the error that the someInputVariableInModule1 is not available inside module1.componentA.component.ts - even though you have the @Input() someInputVariableInModule1
in the module1.componentA.
If this happens, you want to share the module1.componentA to be accessible in other modules.
So if you share the module1.componentA inside a sharedModule, the module1.componentA will be usable inside other modules (outside from module1), and every module importing the sharedModule will be able to access the selector in their templates injecting the @Input()
declared variable.
Solution 30 - Javascript
This is for the folks who use plain JavaScript instead of Type Script. In addition to referencing the forms script file on top of the page like below:
<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>
You should also tell the the module loader to load the ng.forms.FormsModule
. After making the changes my imports
property of NgModule
method looked like below:
imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
Solution 31 - Javascript
I faced the same problem and the reason was that I was using ngModel in my MenuComponent
. I imported my MenuComponent in app.module.ts
, but I forgot to declare it.
Declaring the MenuComponent solved my issue. I.e., as shown in the below image:
Solution 32 - Javascript
I upgraded from RC1 to RC5 and received this error.
I completed my migration (introducing a new app.module.ts
file, changing package.json
to include new versions and missing modules, and finally changing my main.ts
to boot accordingly, based on the Angular2 quick start example).
I did an npm update
and then an npm outdated
to confirm the versions installed were correct, still no luck.
I ended up completely wiping the node_modules
folder and reinstalling with npm install
- Voila! Problem solved.
Solution 33 - Javascript
When I first did the tutorial, main.ts looked slightly different from what it is now. It looks very similar, but note the differences (the top one is correct).
Correct:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Old tutorial code:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
Solution 34 - Javascript
For any version from Angular 2, you need to import FormsModule in your app.module.ts file and it will fix the issue.
Solution 35 - Javascript
Recently I found that mistake happened not only in case when you forgot to import FormsModule in your module. In my case problem was in this code:
<input type="text" class="form-control" id="firstName"
formControlName="firstName" placeholder="Enter First Name"
value={{user.firstName}} [(ngModel)]="user.firstName">
I fix it with change formControlName -> name
<input type="text" class="form-control" id="firstName"
name="firstName" placeholder="Enter First Name"
value={{user.firstName}} [(ngModel)]="user.firstName">
Solution 36 - Javascript
The YouTube video "Angular error can't bind to 'ngModel' since it isn't a known property of input" explains how to solve this practically. Below goes the textual explanation of the same.
> Angular error “Can't bind to 'ngModel' since it isn't a known property > of 'input'”
A simple translation of the above error message is that the "ngModel" directive is not understood and the necessary Angular modules needs to be loaded so that the syntax works.
For "ngModel" directive to work inside HTML we need to import "FormModules" from "@Angular/forms".Below is one more similar kind of error, but related to "FormsGroup". In the below case we should load ReactiveFormsModule.
> Template parse errors:Can't bind to 'formGroup' since it isn't a known > property of 'form'.
A small tip when you get an error such as above: you can hunt for the "[Error-->]" text, and the arrow points towards the directive which is not understood by Angular.
Solution 37 - Javascript
Though the answer solves the issue, I would like to provide a little more information on this topic as I have also undergone this issue when I started to work on Angular projects.
A beginner should understand that there are two main types of forms. They are Reactive forms and Template-driven forms. From Angular 2 onward, it is recommended to use Reactive forms for any kind of forms.
Reactive forms are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.
Template-driven forms are useful for adding a simple form to an application, such as an email list signup form. They're easy to add to an application, but they don't scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, use template-driven forms.
Refer Angular documents for more details.
Coming to the question, [(ngModel)]="..."
is basically a binding syntax. In order to use this in your component HTML page, you should import FormsModule in your NgModule (where your component is present). Now [(ngModel)]
is used for a simple two-way binding or this is used in your form for any input HTML element.
On the other hand, to use reactive forms, import ReactiveFormsModule
from the @angular/forms
package and add it to your NgModule's imports array.
For example, if my component HTML content does not have [(ngmodel)] in any HTML element, then I don't need to import FormsModule.
In my below example, I have completely used Reactive Forms and hence I don't need to use FormsModule in my NgModule.
Create GroupsModule:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GroupsRoutingModule, routedAccountComponents } from './groups-routing.module';
import { ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';
import { ModalModule } from 'ngx-bootstrap';
@NgModule({
declarations: [
routedAccountComponents
],
imports: [
CommonModule,
ReactiveFormsModule,
GroupsRoutingModule,
SharedModule,
ModalModule.forRoot()
]
})
export class GroupsModule {
}
Create the routing module (separated to main the code and for readability):
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GroupsComponent } from './all/index.component';
import { CreateGroupComponent } from './create/index.component';
const routes: Routes = [
{
path: '',
redirectTo: 'groups',
pathMatch: 'full'
},
{
path: 'groups',
component: GroupsComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class GroupsRoutingModule { }
export const routedAccountComponents = [
GroupsComponent,
CreateGroupComponent
];
CreateGroupComponent html code
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<label for="name">Group Name</label>
<div class="form-group">
<div class="form-line">
<input type="text" formControlName="name" class="form-control">
</div>
</div>
</form>
CreateGroupComponent ts file
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { DialogResult } from 'src/app/shared/modal';
import { FormGroup, FormControl, AbstractControl } from '@angular/forms';
import { Subject } from 'rxjs';
import { ToastrService } from 'ngx-toastr';
import { validateAllFormFields } from 'src/app/services/validateAllFormFields';
import { HttpErrorResponse } from '@angular/common/http';
import { modelStateFormMapper } from 'src/app/services/shared/modelStateFormMapper';
import { GroupsService } from '../groups.service';
import { CreateGroup } from '../model/create-group.model';
@Component({
selector: 'app-create-group',
templateUrl: './index.component.html',
providers: [LoadingService]
})
export class CreateGroupComponent implements OnInit {
public form: FormGroup;
public errors: string[] = [];
private destroy: Subject<void> = new Subject<void>();
constructor(
private groupService: GroupsService,
private toastr: ToastrService
) { }
private buildForm(): FormGroup {
return new FormGroup({
name: new FormControl('', [Validators.maxLength(254)])
});
}
private getModel(): CreateGroup {
const formValue = this.form.value;
return <CreateGroup>{
name: formValue.name
};
}
public control(name: string): AbstractControl {
return this.form.get(name);
}
public ngOnInit() {
this.form = this.buildForm();
}
public onSubmit(): void {
if (this.form.valid) {
// this.onSubmit();
//do what you need to do
}
}
}
I hope this helps developers to understand as to why and when you need to use FormsModule.
Solution 38 - Javascript
This error will happen too even if the FormsModule
is imported directly or indirectly (from a shared module for example) in the feature module, if the imported component is not declared on declarations
:
I followed Deborah Kurata's Angular Routing course. While I added the imported component ProductEditInfoComponent on Angular Route's component
property, I forgot to add ProductEditInfoComponent on declarations
property.
Adding the ProductEditInfoComponent on the declarations property would solve the NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'. problem:
Solution 39 - Javascript
For me the issue was, I forgot to declare the component in the declarations array of the module.
@NgModule({
declarations: [yourcomponentName]
})
Solution 40 - Javascript
I was getting the same error when running my Angular tests because FormsModule was not added in the specification file.
We need to add it in all specification files whereas for the application to run successfully we will add at one place in the app.module.ts file.
Solution 41 - Javascript
Actually in most of the cases the FormsModule
was already imported. So what you have to do is you have to make sure that
- Your component is properly added in the declarations array in app.module.ts file.
- You should verify that the binding was well spelled. The correct spelling is
[(ngModel)]
Solution 42 - Javascript
Make sure for the template-driven forms approach (https://angular.io/guide/forms), as has already been mentioned by @Nikita Sychou, you have decorated the input field with the "name" property, eg
<form>
<input [(ngModel)]="form.email" name="email"></input>
and that the FormsModule has been imported in the associated @NgModule. Both are preconditions for avoiding the "Can't bind to ngModel" errors. If you still get styling errors in your IDE e.g. IntelliJ complaining about the ngModel directive just ignore them.. you are good to go :-)
Solution 43 - Javascript
You need to import the FormsModule
Open app.module.ts
and add line
import { FormsModule } from '@angular/forms';
and
@NgModule({
imports: [
FormsModule
],
})
Solution 44 - Javascript
Note: Remember that the ngModel directive is defined as a part of Angular FormsModule and you need to include FormsModule in the imports: [...] section of the Angular module metadata, in which you want to use it.
Solution 45 - Javascript
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
],
})
Solution 46 - Javascript
Main reason of this error is you forget to import FormsModule in your app.module.ts.
But sometimes in big projects you may forget add your component in its module and confront this error.
Solution 47 - Javascript
Before you can use two way binding in Angular you need to import the FormsModule package into your module.
You do this by adding FormsModule to the imports array inside your module (e.g. app.module.ts) like this.
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
...,
FormsModule <-------
],
[...]
})
Solution 48 - Javascript
I am using Angular 9 and I have a '
I resolved the error by just removing only that (ngModel) part.
Solution 49 - Javascript
I was getting the same error even that I added FormsModule as described above. So just a simple restart was required to finish the job.
Solution 50 - Javascript
Make sure [(ngModel)] is actually spelled 'ngModel' with Capital M.. I lost some minutes for not seeing this