Angular 2: Can't bind to 'ngModel' since it isn't a known property of 'input'
FormsAngularAngular2 TemplateAngular2 FormsForms Problem Overview
I'm trying to implement Dynamic Forms in Angular 2. I've added additional functionalities like Delete and Cancel to the dynamic forms. I've followed this documentation: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html
I've made some changes to the code. I'm getting error here.
How do i make this error go?
You can find the full code here: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview , which is working in plunker but not in my local system.
Html code:
<div>
<form [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<label [attr.for]="question.key">{{question.label}}</label>
<div [ngSwitch]="question.controlType">
<input *ngSwitchCase="'textbox'" [formControlName]="question.key"
[id]="question.key" [type]="question.type" [(ngModel)]="question.value">
<select [id]="question.key" [(ngModel)]="question.value" *ngSwitchCase="'dropdown'" [formControlName]="question.key" >
<option *ngFor="let opt of question.options" [ngValue]="opt.key" >{{opt.value}}</option>
</select>
<input *ngSwitchCase="'checkbox'" [(ngModel)]="question.value"
[id]="question.key" [type]="question.type" (change)="question.value = ck.checked" #ck [ngModelOptions]="{standalone: true}">
</div>
<div class="errorMessage" *ngIf="!form.controls[question.key].valid">{{question.label}} is required</div>
</div>
<div class="form-row">
<button type="submit" [disabled]="!form.valid" (click)="onSubmit()">Save</button>
<button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
<button type="button" class="btn btn-default" (click)="clear()">Clear</button>
</div>
</form>
<div *ngIf="payLoad" class="form-row">
<strong>Saved the following values</strong><br>{{payLoad}}
</div>
</div>
Component code:
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { QuestionBase } from './question-base';
import { QuestionControlService } from './question-control.service';
import { ControlGroup } from '@angular/common';
import {ChangeDetectorRef} from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'dynamic-form',
templateUrl: 'app/dynamicform/form.component.html',
directives: [REACTIVE_FORM_DIRECTIVES],
providers: [QuestionControlService]
})
export class DynamicFormComponent implements OnInit {
@Input() questions: QuestionBase<any>[] = [];
form: FormGroup;
payLoad:any;
payLoad2:any;
questiont: QuestionBase<any>;
questiond: QuestionBase<any>;
constructor(private qcs: QuestionControlService, private cdr: ChangeDetectorRef) { }
ngOnInit() {
this.form = this.qcs.toFormGroup(this.questions);
console.log("Form Init",this.questions);
this.questiont = JSON.parse(JSON.stringify(this.questions));
this.questiond = JSON.parse(JSON.stringify(this.questions));
}
onSubmit() {
this.payLoad = JSON.stringify(this.form.value);
this.payLoad2=this.payLoad;
this.questiont = JSON.parse(JSON.stringify(this.questions));
console.log("Submitted data",this.questions);
}
cancel(){
console.log("Canceled");
this.questions = JSON.parse(JSON.stringify(this.questiont));
}
clear(){
this.questions = JSON.parse(JSON.stringify(this.questiond));
this.questiont = JSON.parse(JSON.stringify(this.questiond));
console.log("Cleared");
this.cdr.detectChanges();
}
}
Forms Solutions
Solution 1 - Forms
Figured out quick solution, update your @NgModule code like this :
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Source: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
Solution 2 - Forms
In order to make ngModel work when using AppModules (NgModule ), you have to import FormsModule in your AppModule .
Like this:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
bootstrap: [AppComponent]
})
export class AppModule {}
Solution 3 - Forms
I encountered a similar error after upgrading to RC5; i.e. Angular 2: Can't bind to 'ngModel' since it isn't a known property of 'input'.
The code on Plunker show you using Angular2 RC4, but the example code at https://angular.io/docs/ts/latest/cookbook/dynamic-form.html is using NGModule which is part of RC5. NGModules is a breaking change from RC4 to RC5.
This page explains the migration from RC4 to RC5: https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html
I hope this addresses the error you're getting and help get you going in the right direction.
In short, I had to create an NGModule in app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I then changed main.ts to use the module:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Of course, I also needed to update the dependencies in package.json. Here's my dependencies from package.json. Admittedly, I've hobbled them together from other sources (maybe the ng docs examples), so your mileage may vary:
...
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.5",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.15",
"bootstrap": "^3.3.6"
},
...
I hope this helps better. :-)
Solution 4 - Forms
import {FormControl,FormGroup} from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
You should also add the missing ones.
Solution 5 - Forms
You have just add FormsModule
and import the FormsModule
in your app.module.ts
file.
import { FormsModule } from '@angular/forms';
imports: [
BrowserModule, FormsModule
],
Just add the above two lines in your app.module.ts
. It's working fine.
Solution 6 - Forms
You need to import FormsModule in your @NgModule Decorator, @NgModule is present in your moduleName.module.ts file.
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
Solution 7 - Forms
Step to follow
app.module.ts
file.
1. Open your .
import { FormsModule } from '@angular/forms';
2. Add .
FormsModule
to imports
asimports: [ BrowserModule, FormsModule ],
3. Add .
Final result will look like this
.....
import { FormsModule } from '@angular/forms';
.....
@NgModule({
.....
imports: [
BrowserModule, FormsModule
],
.....
})
Solution 8 - Forms
To be able to use 'ngModule'
, the 'FormsModule'
(from @angular/forms
) needs to be added to your import[]
array in the AppModule
(should be there by default in a CLI project).
Solution 9 - Forms
First import FormsModule from angular lib and under NgModule declared it in imports
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
Solution 10 - Forms
You need to import @angular/forms dependency to your module.
if you are using npm, install the dependency :
npm install @angular/forms --save
Import it to your module :
import {FormsModule} from '@angular/forms';
@NgModule({
imports: [.., FormsModule,..],
declarations: [......],
bootstrap: [......]
})
And if you are using SystemJs for loading modules
'@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
Now you can use [(ngModel)] for two ways databinding.
Solution 11 - Forms
For some reason in Angular 6 simply importing the FormsModule did not fix my issue. What finally fixed my issue was by adding
import { CommonModule } from '@angular/common';
@NgModule({
imports: [CommonModule],
})
export class MyClass{
}
Solution 12 - Forms
Let’s assume, your old app.module.ts may look similar to this :
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Now import FormsModule in your app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
http://jsconfig.com/solution-cant-bind-ngmodel-since-isnt-known-property-input/
Solution 13 - Forms
This answer may help you if you are using Karma:
I've did exactly as it's mentioned in @wmnitin's answer, but the error was always there. When use "ng serve" instead of "karma start", it works !
Solution 14 - Forms
It's described on the Angular tutorial: https://angular.io/tutorial/toh-pt1#the-missing-formsmodule
You have to import FormsModule
and add it to imports in your @NgModule
declaraction.
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
DynamicConfigComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})