Angular 2: Can't bind to 'ngModel' since it isn't a known property of 'input'

Question

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();
  }
}

Answer 1

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’

Answer 2

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 {}

Answer 3

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. :-)

Answer 4

import {FormControl,FormGroup} from '@angular/forms';

import {FormsModule,ReactiveFormsModule} from '@angular/forms';

You should also add the missing ones.

Answer 5

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.

Answer 6

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 ]
 })

Answer 7

Step to follow

app.module.ts

.

import { FormsModule } from '@angular/forms';

.

FormsModule importsimports: [ BrowserModule, FormsModule ],

.

Final result will look like this

.....
import { FormsModule } from '@angular/forms';
.....
@NgModule({
.....
  imports: [   
     BrowserModule, FormsModule 
  ],
.....
})

Answer 8

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).

Answer 9

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]
    })

Answer 10

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.

Answer 11

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{
}

Answer 12

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/

Answer 13

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 ！

Answer 14

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]
})