Angular 2: Nie można powiązać z 'ngModel', ponieważ nie jest to znana właściwość 'input'

Question

Próbuję zaimplementować Dynamic Forms w Angular 2. Dodałem dodatkowe funkcje takie jak Delete i Cancel do dynamiczne formy. ja po tej dokumentacji: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

Zrobiłem kilka zmian w kodzie. Dostaję tutaj błąd.

Jak mogę zrobić ten błąd?

Pełny kod można znaleźć tutaj: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview, który działa w trybie plunkera, ale nie w moim systemie lokalnym. Kod

HTML: Kod

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

Składnik:

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

Znaleziony to rozwiązanie podczas Googling, zaktualizuj kod @NgModule tak:

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

Źródło: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

Answer 2

natknąłem się na podobny błąd po aktualizacji do RC5; tj. Angular 2: Nie można powiązać z "ngModel", ponieważ nie jest to znana właściwość "input".

Kod na Plunker pokazuje użycie Angular2 RC4, ale przykładowy kod na https://angular.io/docs/ts/latest/cookbook/dynamic-form.html używa NGModule, który jest częścią RC5. NGModules to przełomowa zmiana z RC4 na RC5.

Ta strona wyjaśnia migrację z RC4 na RC5: https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

Mam nadzieję, że usuwa błąd dostajesz i pomóc Ci idą w dobrym kierunku.

Krótko mówiąc, musiałem stworzyć NGModule w 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 { } 

Potem zmieniły main.ts użyć modułu:

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

platformBrowserDynamic().bootstrapModule(AppModule); 

oczywiście, ja też potrzebne do aktualizacji zależności w package.json. Oto moje zależności od pakietu package.json. Wprawdzie mam pokuśtykał je razem z innymi źródłami (może przykładach ng docs), więc może się wahać:

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

Mam nadzieję, że to pomaga lepiej. :-)

Answer 3

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

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

Należy również dodać brakujące nich.

Answer 4

Aby ngModel działał przy użyciu AppModules (NgModule), należy zaimportować FormsModule w swoim AppModule.

Jak to:

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 5

Ta odpowiedź może pomóc, jeśli używasz Karma:

Ja zrobiłem dokładnie tak, jak to wspomniano w użytkownika @ wmnitin odpowiedź, ale błąd był zawsze tam. Gdy użyjesz "ng serve" zamiast "karma start", zadziała!

Answer 6

Musisz zaimportować @ kątowe/formula zależności do modułu.

jeśli używasz KMP zainstalować Zależność:

npm install @angular/forms --save 

zaimportować go do swojego modułu:

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

A jeśli używasz SystemJs do ładowania modułów

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

Teraz możesz użyć [(ngModel)] do dwukierunkowego wiązania danych.

Answer 7

Musisz zaimportować FormsModule w swoim @NgModule Decorator, @NgModule jest obecny w pliku moduleName.module.ts.

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

Answer 8

Aby móc korzystać 'ngModule' The 'FormsModule' (od @angular/forms) musi zostać dodany do tablicy import[] w AppModule (powinno tam być domyślnie w projekcie CLI).

Answer 9

Po prostu dodano FormsModule i zaimportowano plik FormsModule do pliku .

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

imports: [ 
    BrowserModule, FormsModule 
], 

Po prostu dodaj powyższe dwie linie do swojej app.module.ts. Działa dobrze.