forms - control - get value form angular

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

Question

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

Answer 1

Acaba de agregar FormsModule e importa 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 . Funciona bien

Answer 2

Debe importar la dependencia @ angular / formas 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.

Answer 3

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

Answer 4

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！

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

Paso a seguir

1. Abra su archivo app.module.ts .

.

2. Agregue 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 
  ],
.....
})

Answer 9

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

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

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

export class MyClass{
}

Answer 10

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

Answer 11

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

Answer 12

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

FormsModule importar FormsModule y agregarlo a las importaciones en su declaración @NgModule .

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

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

Answer 13

Supongamos que su antigua app.module.ts 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/

Answer 14

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

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

También debe agregar los que faltan.