Sudut 2: Tidak dapat mengikat ke 'ngModel' karena ini bukan properti 'input' yang dikenal

Saya mencoba menerapkan Formulir Dinamis dalam Angular 2. Saya telah menambahkan fungsionalitas tambahan seperti Hapus dan Batalkan ke formulir dinamis. Saya telah mengikuti dokumentasi ini: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

Saya telah membuat beberapa perubahan pada kode. Saya mendapatkan kesalahan di sini.

Bagaimana cara saya membuat kesalahan ini?

Anda dapat menemukan kode lengkap di sini: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview , yang bekerja di plunker tetapi tidak di sistem lokal saya.

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

Kode komponen:

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

Mencari solusi cepat, perbarui kode @NgModule Anda seperti ini:

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

Sumber: Tidak dapat mengikat 'ngModel' karena ini bukan properti 'input' yang dikenal

Agar ngModel berfungsi ketika menggunakan AppModules (NgModule), Anda harus mengimpor FormsModule di AppModule Anda.

Seperti ini:

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

Saya mengalami kesalahan serupa setelah memutakhirkan ke RC5; yaitu Angular 2: Tidak dapat mengikat 'ngModel' karena ini bukan properti 'input' yang dikenal.

Kode pada Plunker menunjukkan Anda menggunakan Angular2 RC4, tetapi kode contoh di https://angular.io/docs/ts/latest/cookbook/dynamic-form.html menggunakan NGModule yang merupakan bagian dari RC5. NGModules adalah perubahan besar dari RC4 ke RC5.

Halaman ini menjelaskan migrasi dari RC4 ke RC5: https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

Saya harap ini mengatasi kesalahan yang Anda dapatkan dan membantu Anda pergi ke arah yang benar.

Singkatnya, saya harus membuat NGModule di 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 { }

Saya kemudian mengubah main.ts untuk menggunakan modul:

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

platformBrowserDynamic().bootstrapModule(AppModule);

Tentu saja, saya juga perlu memperbarui dependensi di package.json. Inilah dependensi saya dari package.json. Memang, saya sudah tertatih-tatih bersama-sama dari sumber lain (mungkin contoh dokumen), sehingga jarak tempuh Anda dapat bervariasi:

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

Saya harap ini membantu lebih baik. :-)

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

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

Anda juga harus menambahkan yang hilang.

Anda baru saja menambahkan FormsModuledan mengimpor file FormsModuleAnda app.module.ts.

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

imports: [
    BrowserModule, FormsModule 
],

Cukup tambahkan dua baris di atas di app.module.ts. Ini bekerja dengan baik.

Anda perlu mengimpor FormsModule di @NgModule Dekorator Anda, @NgModule ada di file moduleName.module.ts Anda.

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

Langkah untuk diikuti

.

.

.

Hasil akhir akan terlihat seperti ini

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

Untuk dapat menggunakan 'ngModule', 'FormsModule'(dari @angular/forms) perlu ditambahkan ke import[]array Anda di AppModule(harus ada di sana secara default dalam proyek CLI).

Impor FormsModule pertama dari sudut lib dan di bawah NgModule menyatakannya dalam impor

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

Anda perlu mengimpor @ angular / dependensi formulir ke modul Anda.

jika Anda menggunakan npm, instal dependensi:

npm install @angular/forms --save

Impor ke modul Anda:

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

Dan jika Anda menggunakan SystemJs untuk memuat modul

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

Sekarang Anda dapat menggunakan [(ngModel)] untuk dua cara penyatuan data.

Untuk beberapa alasan di Angular 6 hanya mengimpor FormsModule tidak memperbaiki masalah saya. Yang akhirnya memperbaiki masalah saya adalah dengan menambahkan

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

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

export class MyClass{
}

Mari kita asumsikan, app.module.ts lama Anda mungkin terlihat mirip dengan ini:

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

Sekarang impor FormsModule di app.module.ts Anda

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/

Jawaban ini dapat membantu Anda jika Anda menggunakan Karma:

Saya telah melakukan persis seperti yang disebutkan dalam jawaban @ wmnitin, tetapi kesalahan selalu ada. Saat menggunakan "ng serve" dan bukannya "karma start", ia berfungsi！

Ini dijelaskan pada tutorial Angular: https://angular.io/tutorial/toh-pt1#the-missing-formsmodule

Anda harus mengimpor FormsModuledan menambahkannya ke impor dalam @NgModuledeklarasi Anda .

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

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