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    lt div gt     lt form  formGroup   form  gt        lt div  ngFor  let question of questions  class  form-row  gt         lt label  attr for   question key  gt   question label   lt  label gt      lt div  ngSwitch   question controlType  gt        lt input  ngSwitchCase   textbox    formControlName   question key               id   question key   type   question type    ngModel    question value  gt        lt select  id   question key    ngModel    question value   ngSwitchCase   dropdown    formControlName   question key   gt         lt option  ngFor  let opt of question options   ngValue   opt key   gt   opt value   lt  option gt       lt  select gt        lt input  ngSwitchCase   checkbox      ngModel    question value               id   question key   type   question type   change   question value   ck checked   ck  ngModelOptions    standalone  true   gt      lt  div gt      lt div class  errorMessage   ngIf   form controls question key  valid  gt   question label   is required lt  div gt       lt  div gt        lt div class  form-row  gt         lt button type  submit   disabled    form valid   click   onSubmit    gt Save lt  button gt         lt button type  button  class  btn btn-default   click   cancel    gt Cancel lt  button gt         lt button type  button  class  btn btn-default   click   clear    gt Clear lt  button gt        lt  div gt     lt  form gt      lt div  ngIf  payLoad  class  form-row  gt       lt strong gt Saved the following values lt  strong gt  lt br gt   payLoad      lt  div gt   lt  div gt    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 lt any gt            form  FormGroup    payLoad any    payLoad2 any    questiont  QuestionBase lt any gt     questiond  QuestionBase lt any gt     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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   -

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

import  FormControl FormGroup  from   angular forms    import  FormsModule ReactiveFormsModule  from   angular forms     You should also add the missing ones

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to forms

Examples related to angular

Examples related to angular2-template

Examples related to angular2-forms