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


178

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

entrez la description de l'image ici

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

J'ai la même erreur après la mise à niveau. J'écrirai ici si je trouve pourquoi.
Carl Boisvert

1
D'accord, pour moi, il a disparu lorsque j'ai importé le FormsModule dans ma déclaration NgModule. Mais j'ai toujours une erreur disant "AppComponent n'a pas de configuration d'itinéraire." même si j'ai importé les itinéraires. Mais vérifiez si cela résout votre problème.
Carl Boisvert


Réponses:


282

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'


15
Est-ce toujours la bonne solution? Tout pour moi est comme ça et j'obtiens toujours l'erreur?
FrancescoMussi

2
Oui, cela fonctionne toujours, vous pouvez également essayer ReactiveFormsModule au lieu de FormsModule. Veuillez poster votre erreur le cas échéant.
wmnitin

1
Je suis désolé. Mon problème était quelque chose de légèrement différent. J'ai compris cela ici: stackoverflow.com/questions/39152071/ ... Merci pour la réponse!
FrancescoMussi

29
Il semble que la vraie réponse était que vous deviez importer le FormsModulemême dans NgModulelequel vous avez déclaré votre composant. Le simple fait de dire "faites ressembler votre NgModule à ceci" n'est pas une très bonne réponse.
WebWanderer

Cela ne fonctionne pas réellement, ce doit être le ReactiveFormsModule
Julius ShadowAspect Flimmel

53

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

Vous devez ajouter FormsModule aux importations dans le module où vous utilisez ses directives: dans toutes, non?
Marvin Zumbado

12

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


1
J'ai modifié la réponse pour inclure des exemples de code spécifiques.
jackfrosch

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

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

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


1
Salut, dans mon cas, c'est une solution, il semble que le groupe Formulaire soit une partie importante.
Jean Jimenez

8

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.


4

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

4

Étape à suivre

1. Ouvrez votre app.module.tsfichier.

.

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

.

3. Ajouter FormsModule en importstant queimports: [ BrowserModule, FormsModule ],

.

Le résultat final ressemblera à ceci

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

3

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


3

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

2

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.


1

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

1

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/


0

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!


0

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]
})
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.