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

I have the same error after upgrading. Will write here if I find why. — Carl Boisvert, Aug 10 '16 at 23:26
Alright, for me it disappeared when I imported the FormsModule in my NgModule declaration. But I still have an error saying "AppComponent has no route config." even if I've imported the routes. But check if it fix your problem. — Carl Boisvert, Aug 10 '16 at 23:38
Possible duplicate of [Can't bind to 'ngModel' since it isn't a known property of 'input'](https://stackoverflow.com/questions/38892771/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input) — Heretic Monkey, Mar 23 '19 at 16:47

wmnitin · Accepted Answer · 2020-06-01T20:08:52.860

289

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’

edited Jun 01 '20 at 20:08

answered Aug 11 '16 at 09:43

wmnitin

3,387
1
13
19

15

It is this still the correct solution? Everything for me is like this and still I am getting the error? – FrancescoMussi Aug 25 '16 at 17:52
2

Yeah its still working, you can also try ReactiveFormsModule instead of FormsModule. Please post your error if any. – wmnitin Aug 26 '16 at 05:44
1

I am sorry. My issue was something slightly different. I figured that out here: https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form Thanks for reply! – FrancescoMussi Aug 26 '16 at 07:04
32

It appears that the real answer was that you need to import the `FormsModule` in the same `NgModule` that you have declared your component in. Simple saying "make your NgModule look like this" is not a very good answer. – WebWanderer Jul 25 '17 at 16:38
It does not work actually, it has to be the ReactiveFormsModule – Julius ShadowAspect Flimmel Oct 16 '17 at 14:04
It works if you have the above modules in the shown order. Particularly, AppComponent seems to need to come after FormsModule. This was the only change I made to resolve the same issue. – J E Carter II Dec 10 '18 at 20:21
It worked for me on Ionic 4 with Angular 7. Thank you! – Andrew Aug 22 '19 at 15:01
Also be certain you include FormsModule under imports, not declarations as I had mistakenly done. – Eric Soyke Jun 02 '20 at 17:47
thanks, I forgot to add component in declaration section – Krishan Kumar Sep 19 '21 at 18:13

score 55 · Answer 2 · answered Feb 04 '17 at 20:34

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

You need to add FormsModule to imports in the module where you're using its directives: In all of them right? — Marvin Zumbado, Jan 26 '18 at 03:59

jackfrosch · Answer 3 · 2016-08-18T19:28:48.120

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

I edited the answer to include specific code examples. – jackfrosch Aug 30 '16 at 20:56 — jackfrosch, Aug 30 '16 at 20:56

score 11 · Answer 4 · answered Aug 17 '16 at 13:39

11

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

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

You should also add the missing ones.

answered Aug 17 '16 at 13:39

Mertcan Diken

14,483
2
26
33

1

Hi, in my case this is a solution, it seems that the Form group is an important part. – Jean Jimenez Jun 15 '17 at 13:45

score 9 · Answer 5 · edited Dec 24 '17 at 10:10

9

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.

edited Dec 24 '17 at 10:10

Jeffrey

1,271
2
15
31

answered Dec 24 '17 at 08:41

kirankumar

135
1
7

score 4 · Answer 6 · answered Sep 08 '17 at 13:22

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

score 4 · Answer 7 · edited Jun 20 '20 at 09:12

4

Step to follow

1. Open your app.module.ts file.

.

2. Add import { FormsModule } from '@angular/forms';

.

3. Add FormsModule to imports asimports: [ BrowserModule, FormsModule ],

.

Final result will look like this

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 03 '18 at 10:47

Deepu Reghunath

8,132
2
38
47

score 3 · Answer 8 · answered Oct 29 '17 at 20:22

3

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

answered Oct 29 '17 at 20:22

Nisarg Patil

1,509
1
16
27

score 3 · Answer 9 · answered Apr 05 '18 at 11:01

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

score 2 · Answer 10 · answered Aug 11 '17 at 14:31

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.

score 1 · Answer 11 · answered Oct 18 '18 at 09:38

1

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

answered Oct 18 '18 at 09:38

Andy Braham

9,594
4
48
56

score 1 · Answer 12 · answered Apr 17 '19 at 18:49

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/

score 0 · Answer 13 · answered Aug 01 '17 at 11:32

0

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 ！

answered Aug 01 '17 at 11:32

luohf07

1
1

score 0 · Answer 14 · answered Dec 17 '18 at 10:37

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

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

14 Answers14

Linked

Related