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


178

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

masukkan deskripsi gambar di sini

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

Saya memiliki kesalahan yang sama setelah memutakhirkan. Akan menulis di sini jika saya menemukan alasannya.
Carl Boisvert

1
Baiklah, bagi saya itu menghilang ketika saya mengimpor FormsModule dalam deklarasi NgModule saya. Tetapi saya masih memiliki kesalahan mengatakan "AppComponent tidak memiliki konfigurasi rute." bahkan jika saya sudah mengimpor rute. Tetapi periksa apakah itu memperbaiki masalah Anda.
Carl Boisvert


Jawaban:


282

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


15
Apakah ini masih solusi yang benar? Semuanya bagiku seperti ini dan masih ada kesalahan?
FrancescoMussi

2
Ya ini masih berfungsi, Anda juga dapat mencoba ReactiveFormsModule alih-alih FormsModule. Silakan kirim kesalahan Anda jika ada.
wmnitin

1
Saya menyesal. Masalah saya adalah sesuatu yang sedikit berbeda. Saya menemukan itu di sini: stackoverflow.com/questions/39152071/... Terima kasih atas balasan!
FrancescoMussi

29
Tampaknya jawaban sebenarnya adalah bahwa Anda perlu mengimpor komponen FormsModuleyang sama dengan NgModuleyang telah Anda deklarasikan. Kata sederhana "buat NgModule Anda terlihat seperti ini" bukanlah jawaban yang sangat bagus.
WebWanderer

Sebenarnya tidak berfungsi, itu harus menjadi ReactiveFormsModule
Julius ShadowAspect Flimmel

53

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

Anda perlu menambahkan FormsModule ke impor di modul di mana Anda menggunakan arahannya: Semuanya benar?
Marvin Zumbado

12

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


1
Saya mengedit jawaban untuk menyertakan contoh kode spesifik.
jackfrosch

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

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

Anda juga harus menambahkan yang hilang.


1
Hai, dalam kasus saya ini adalah solusi, tampaknya grup Formulir merupakan bagian penting.
Jean Jimenez

8

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.


4

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

4

Langkah untuk diikuti

1. Buka app.module.ts file .

.

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

.

3. Tambahkan FormsModule ke importssebagaiimports: [ BrowserModule, FormsModule ],

.

Hasil akhir akan terlihat seperti ini

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

3

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


3

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

2

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.


1

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

1

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/


0

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!


0

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]
})
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.