Angular 2: no se puede enlazar a 'ngModel' ya que no es una propiedad conocida de 'input'

Estoy tratando de implementar formularios dinámicos en Angular 2. He agregado funcionalidades adicionales como Eliminar y Cancelar a los formularios dinámicos. He seguido esta documentación: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

He realizado algunos cambios en el código. Recibo un error aquí.

¿Cómo hago para que este error desaparezca?

Puede encontrar el código completo aquí: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview , que funciona en plunker pero no en mi sistema local.

Código HTML:

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

Código de componente:

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

Resolvió una solución rápida, actualice su código @NgModule de esta manera:

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

Fuente: No se puede vincular a 'ngModel' ya que no es una propiedad conocida de 'input'

Para que ngModel funcione al usar AppModules (NgModule), debe importar FormsModule en su AppModule.

Me gusta esto:

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

Encontré un error similar después de actualizar a RC5; es decir, Angular 2: no se puede enlazar a 'ngModel' ya que no es una propiedad conocida de 'input'.

El código en Plunker muestra que usa Angular2 RC4, pero el código de ejemplo en https://angular.io/docs/ts/latest/cookbook/dynamic-form.html está usando NGModule que es parte de RC5. NGModules es un cambio innovador de RC4 a RC5.

Esta página explica la migración de RC4 a RC5: https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

Espero que esto solucione el error que está recibiendo y lo ayude a avanzar en la dirección correcta.

En resumen, tuve que crear un NGModule en 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 { }

Luego cambié main.ts para usar el módulo:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Por supuesto, también necesitaba actualizar las dependencias en package.json. Aquí están mis dependencias de package.json. Es cierto que los he cojeado de otras fuentes (tal vez los ejemplos de ng docs), por lo que su kilometraje puede variar:

...
"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"
  },
...

Espero que esto ayude mejor. :-)

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

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

También debe agregar los que faltan.

Acaba de agregar FormsModulee importar el FormsModuleen su app.module.tsarchivo.

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

imports: [
    BrowserModule, FormsModule 
],

Simplemente agregue las dos líneas anteriores en su app.module.ts. Funciona bien

Debe importar FormsModule en su Decorador @NgModule, @NgModule está presente en su archivo moduleName.module.ts.

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

Paso a seguir

.

.

.

El resultado final se verá así

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

Para poder usar 'ngModule', el 'FormsModule'(desde @angular/forms) debe agregarse a su import[]matriz en AppModule(debería estar allí de forma predeterminada en un proyecto CLI).

Primero importe FormsModule desde angular lib y bajo NgModule lo declaró en importaciones

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

Necesita importar @ angular / formas de dependencia a su módulo.

Si está utilizando npm, instale la dependencia:

npm install @angular/forms --save

Importarlo a su módulo:

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

Y si está utilizando SystemJs para cargar módulos

'@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',

Ahora puede usar [(ngModel)] para la vinculación de datos de dos maneras.

Por alguna razón en Angular 6, simplemente importar el FormsModule no solucionó mi problema. Lo que finalmente solucionó mi problema fue agregando

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
})

export class MyClass{
}

Supongamos que su app.module.ts anterior puede ser similar a esto:

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

Ahora importe FormsModule en su 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/

Esta respuesta puede ayudarte si estás usando Karma:

Hice exactamente lo que se menciona en la respuesta de @ wmnitin, pero el error siempre estuvo ahí. Cuando usa "ng serve" en lugar de "karma start", funciona！

Se describe en el tutorial Angular: https://angular.io/tutorial/toh-pt1#the-missing-formsmodule

Tiene que importar FormsModuley agregarlo a las importaciones en su @NgModuledeclaración.

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

@NgModule({
  declarations: [
    AppComponent,
    DynamicConfigComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})