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


178

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

ingrese la descripción de la imagen aquí

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

Tengo el mismo error después de actualizar. Escribiré aquí si encuentro por qué.
Carl Boisvert

1
Muy bien, para mí desapareció cuando importé el FormsModule en mi declaración NgModule. Pero todavía tengo un error que dice "AppComponent no tiene configuración de ruta". incluso si he importado las rutas. Pero compruebe si soluciona su problema.
Carl Boisvert


Respuestas:


282

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'


15
¿Sigue siendo la solución correcta? ¿Todo para mí es así y todavía recibo el error?
FrancescoMussi

2
Sí, todavía funciona, también puedes probar ReactiveFormsModule en lugar de FormsModule. Por favor, publique su error si lo hay.
wmnitin

1
Lo siento. Mi problema fue algo ligeramente diferente. Me di cuenta de eso aquí: stackoverflow.com/questions/39152071/... ¡ Gracias por responder!
FrancescoMussi

29
Parece que la respuesta real fue que necesita importar el FormsModulemismo en el NgModuleque ha declarado su componente. El simple decir "hacer que su NgModule se vea así" no es una muy buena respuesta.
WebWanderer

En realidad no funciona, tiene que ser el ReactiveFormsModule
Julius ShadowAspect Flimmel

53

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

Debe agregar FormsModule a las importaciones en el módulo en el que está utilizando sus directivas: ¿en todas ellas, verdad?
Marvin Zumbado

12

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


1
Edité la respuesta para incluir ejemplos de código específicos.
jackfrosch

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

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

También debe agregar los que faltan.


1
Hola, en mi caso esta es una solución, parece que el grupo de formularios es una parte importante.
Jean Jimenez

8

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


4

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

4

Paso a seguir

1. Abre tu app.module.ts archivo.

.

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

.

3. Agregar FormsModule a importscomoimports: [ BrowserModule, FormsModule ],

.

El resultado final se verá así

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

3

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


3

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

2

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.


1

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

1

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/


0

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!


0

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]
})
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.