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

Question

J'essaie de mettre en œuvre 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 fait quelques changements dans le code. J'obtiens une erreur ici.

Comment puis-je 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 du 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();
  }
}

Answer 1

J'ai trouvé une solution rapide, en mettant à 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'.

Answer 2

Pour que ngModel fonctionne avec les 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 {}

Answer 3

J'ai rencontré une erreur similaire après la mise à niveau vers RC5, à savoir Angular 2 : Can't bind to 'ngModel' since it isn't a known property of 'input'.

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

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

J'espère que cela répondra à l'erreur que vous obtenez et vous aidera à avancer 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 modifié le fichier 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'ai également dû mettre à jour les dépendances dans package.json. Voici mes dépendances à partir de package.json. Il est vrai que je les ai rassemblées à partir d'autres sources (peut-être les exemples de la docs de ng), 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 vous aidera davantage :-)

Answer 4

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

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

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

Answer 5

Vous venez d'ajouter FormsModule et importer le FormsModule dans votre app.module.ts fichier.

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

imports: [
    BrowserModule, FormsModule 
],

Il suffit d'ajouter les deux lignes ci-dessus dans votre app.module.ts . Il fonctionne bien.