Angolare 2: impossibile associare 'ngModel' poiché non è una proprietà nota di 'input'

Sto cercando di implementare Dynamic Forms in Angular 2. Ho aggiunto funzionalità aggiuntive come Elimina e Annulla ai moduli dinamici. Ho seguito questa documentazione: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

Ho apportato alcune modifiche al codice. Sto ricevendo un errore qui.

Come faccio a eliminare questo errore?

È possibile trovare il codice completo qui: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview , che funziona nel plunker ma non nel mio sistema locale.

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

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

Individuata una soluzione rapida, aggiorna il tuo codice @NgModule in questo modo:

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

Fonte: impossibile associare 'ngModel' poiché non è una proprietà nota di 'input'

Per far funzionare ngModel quando si utilizzano AppModules (NgModule), è necessario importare FormsModule in AppModule.

Come questo:

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

Ho riscontrato un errore simile dopo l'aggiornamento a RC5; vale a dire Angular 2: impossibile associare 'ngModel' poiché non è una proprietà nota di 'input'.

Il codice su Plunker ti mostra usando Angular2 RC4, ma il codice di esempio su https://angular.io/docs/ts/latest/cookbook/dynamic-form.html sta usando NGModule che fa parte di RC5. NGModules è una svolta rivoluzionaria da RC4 a RC5.

Questa pagina spiega la migrazione da RC4 a RC5: https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

Spero che questo risolva l'errore che stai riscontrando e ti aiuti ad andare nella giusta direzione.

In breve, ho dovuto creare un 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 { }

Ho quindi cambiato main.ts per utilizzare il modulo:

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

platformBrowserDynamic().bootstrapModule(AppModule);

Naturalmente, dovevo anche aggiornare le dipendenze in package.json. Ecco le mie dipendenze da package.json. Devo ammetterlo, li ho messi insieme da altre fonti (forse gli esempi di documenti ng), quindi il tuo chilometraggio può variare:

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

Spero che questo aiuti meglio. :-)

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

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

Dovresti anche aggiungere quelli mancanti.

Hai appena aggiunto FormsModulee importato FormsModulenel tuo app.module.tsfile.

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

imports: [
    BrowserModule, FormsModule 
],

Basta aggiungere le due righe sopra nel tuo app.module.ts. Funziona bene.

Devi importare FormsModule nel tuo @NgModule Decorator, @NgModule è presente nel tuo file moduleName.module.ts.

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

Passo da seguire

.

.

.

Il risultato finale sarà simile a questo

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

Per poterlo usare 'ngModule', il 'FormsModule'(da @angular/forms) deve essere aggiunto al tuo import[]array nel AppModule(dovrebbe essere presente di default in un progetto CLI).

Il primo modulo Forms importato da lib angolare e sotto NgModule lo ha dichiarato nelle importazioni

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

Devi importare la dipendenza @ angular / form nel tuo modulo.

se si utilizza npm, installare la dipendenza:

npm install @angular/forms --save

Importalo nel tuo modulo:

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

E se stai usando SystemJs per caricare i moduli

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

Ora puoi usare [(ngModel)] per il databinding in due modi.

Per qualche motivo in Angular 6 la semplice importazione del modulo Forms non ha risolto il mio problema. Ciò che finalmente risolto il mio problema fu aggiungendo

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

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

export class MyClass{
}

Supponiamo che la tua vecchia app.module.ts possa essere simile a questa:

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

Ora importa FormsModule 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 { }

http://jsconfig.com/solution-cant-bind-ngmodel-since-isnt-known-property-input/

Questa risposta può aiutarti se stai usando Karma:

Ho fatto esattamente come indicato nella risposta di @ wmnitin, ma l'errore era sempre presente. Quando usi "ng serve" invece di "karma start", funziona！

È descritto nel tutorial angolare: https://angular.io/tutorial/toh-pt1#the-missing-formsmodule

Devi importarlo FormsModulee aggiungerlo alle importazioni nella @NgModuledichiarazione.

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

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