Angular 2: Impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'input'

J'essaye d'implémenter des formulaires dynamiques dans Angular 2. J'ai ajouté des fonctionnalités supplémentaires comme Supprimer et Annuler aux formulaires dynamiques. J'ai suivi cette documentation: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

J'ai apporté quelques modifications au code. Je reçois une erreur ici.

Comment faire disparaître cette erreur?

Vous pouvez trouver le code complet ici: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview , qui fonctionne dans plunker mais pas dans mon système local.

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

Code composant:

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

Solution rapide trouvée, mettez à jour votre code @NgModule comme ceci:

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

Source: Impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'input'

Pour que ngModel fonctionne lors de l'utilisation d'AppModules (NgModule), vous devez importer FormsModule dans votre AppModule.

Comme ça:

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

J'ai rencontré une erreur similaire après la mise à niveau vers RC5; ie Angular 2: Impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'input'.

Le code sur Plunker vous montre l'utilisation d'Angular2 RC4, mais l'exemple de code à https://angular.io/docs/ts/latest/cookbook/dynamic-form.html utilise NGModule qui fait partie de RC5. NGModules est un changement radical de RC4 à RC5.

Cette page explique la migration de RC4 vers RC5: https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

J'espère que cela corrige l'erreur que vous obtenez et vous aide à aller dans la bonne direction.

En bref, j'ai dû créer un NGModule dans 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 { }

J'ai ensuite changé main.ts pour utiliser le module:

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

platformBrowserDynamic().bootstrapModule(AppModule);

Bien sûr, j'avais également besoin de mettre à jour les dépendances dans package.json. Voici mes dépendances de package.json. Certes, je les ai entravés à partir d'autres sources (peut-être les exemples de ng docs), donc votre kilométrage peut varier:

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

J'espère que cela aide mieux. :-)

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

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

Vous devez également ajouter les éléments manquants.

Vous venez d'ajouter FormsModuleet d'importer le FormsModuledans votre app.module.tsfichier.

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

imports: [
    BrowserModule, FormsModule 
],

Ajoutez simplement les deux lignes ci-dessus dans votre fichier app.module.ts. Cela fonctionne bien.

Vous devez importer FormsModule dans votre @NgModule Decorator, @NgModule est présent dans votre fichier moduleName.module.ts.

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

Étape à suivre

.

.

.

Le résultat final ressemblera à ceci

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

Pour pouvoir utiliser 'ngModule', le 'FormsModule'(from @angular/forms) doit être ajouté à votre import[]tableau dans le AppModule(devrait être là par défaut dans un projet CLI).

Premier import FormsModule depuis angular lib et sous NgModule l'a déclaré dans les importations

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

Vous devez importer la dépendance @ angular / forms dans votre module.

si vous utilisez npm, installez la dépendance:

npm install @angular/forms --save

Importez-le dans votre module:

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

Et si vous utilisez SystemJs pour charger des modules

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

Vous pouvez maintenant utiliser [(ngModel)] pour la liaison de données de deux manières.

Pour une raison quelconque dans Angular 6, le simple fait d'importer le FormsModule n'a pas résolu mon problème. Ce qui a finalement résolu mon problème, c'est en ajoutant

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

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

export class MyClass{
}

Supposons que votre ancien app.module.ts ressemble à ceci:

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

Importez maintenant FormsModule dans votre 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/

Cette réponse peut vous aider si vous utilisez Karma:

J'ai fait exactement ce qui est mentionné dans la réponse de @ wmnitin, mais l'erreur était toujours là. Lorsque vous utilisez "ng serve" au lieu de "karma start", cela fonctionne！

Il est décrit sur le tutoriel Angular: https://angular.io/tutorial/toh-pt1#the-missing-formsmodule

Vous devez l'importer FormsModuleet l'ajouter aux importations dans votre @NgModuledéclaration.

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

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