Angular 2: no se puede unir a ‘ngModel’ ya que no es una propiedad conocida de ‘entrada’

Intento implementar Formularios dynamics en Angular 2. Agregué funcionalidades adicionales como Eliminar y Cancelar a los formularios dynamics. He seguido esta documentación: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

enter image description here

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

¿Cómo hago que este error vaya?

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:

{{opt.value}}
{{question.label}} is required
Saved the following values
{{payLoad}}

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[] = []; form: FormGroup; payLoad:any; payLoad2:any; questiont: QuestionBase; questiond: QuestionBase; 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(); } } 

Encontró esta solución mientras busca en Google, actualice su código @NgModule de la siguiente 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 hacer que ngModel funcione cuando se usa AppModules (NgModule), tiene que 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 {} 

Me encontré con un error similar después de actualizar a RC5; es decir, Angular 2: no se puede unir a ‘ngModel’ ya que no es una propiedad conocida de ‘entrada’.

El código en Plunker le muestra usando 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 de ruptura 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 resuelva 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 cogido juntos de otras fonts (tal vez los ejemplos 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 FormsModule e importar el FormsModule en su archivo app.module.ts .

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

Simplemente agregue las dos líneas anteriores en su app.module.ts . Está funcionando bien.

Necesita 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

1. Abra su archivo app.module.ts .

.

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

.

3. Agregue FormsModule a las imports como imports: [ BrowserModule, FormsModule ],

.

El resultado final se verá así

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

Para poder usar 'ngModule' , el 'FormsModule' (desde @angular/forms ) necesita ser agregado a su matriz import[] en el AppModule (debería estar ahí por defecto en un proyecto CLI).

Necesita importar la dependencia @ angular / forms a su módulo.

si está usando npm, instale la dependencia:

 npm install @angular/forms --save 

Importe 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 el enlace de datos de dos maneras.

Primero importa FormsModule de angular lib y bajo NgModule declarado en importaciones

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

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 use “ng serve” en lugar de “karma start”, ¡funciona!