ไม่สามารถผูกกับ 'ngModel' ได้เนื่องจากไม่ใช่คุณสมบัติที่รู้จักของ 'อินพุต'

ฉันมีข้อผิดพลาดต่อไปนี้เมื่อเรียกใช้แอพพลิเคชั่น Angular ของฉันแม้ว่าส่วนประกอบจะไม่แสดงก็ตาม

ฉันต้องแสดงความคิดเห็น<input>เพื่อที่แอพของฉันจะทำงาน

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
   <div>
      <label>Created:</label>
      <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
   </div>
</div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

ฉันกำลังดูฮีโร่ตัวพลั่ว แต่ฉันไม่เห็นความแตกต่างจากรหัสของฉัน

นี่คือไฟล์ส่วนประกอบ:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';

@Component({
   selector: 'intervention-details',
   templateUrl: 'app/intervention/details/intervention.details.html',
   styleUrls: ['app/intervention/details/intervention.details.css']
})

export class InterventionDetails
{
   @Input() intervention: Intervention;

   public test : string = "toto";
}

ใช่แค่นั้นใน app.module.ts ฉันเพิ่งเพิ่ม:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

เพื่อให้สามารถใช้การผูกข้อมูลแบบสองทิศทางสำหรับอินพุตแบบฟอร์มคุณจำเป็นต้องนำเข้าFormsModuleแพ็คเกจในAngularโมดูลของคุณ สำหรับข้อมูลเพิ่มเติมดูAngular 2บทช่วยสอนอย่างเป็นทางการที่นี่และเอกสารประกอบอย่างเป็นทางการสำหรับแบบฟอร์ม

สำหรับใช้[(ngModel)]ในAngular 2 , 4 & 5+คุณจะต้องนำเข้าFormsModuleจาก Angular Form ...

นอกจากนี้ยังอยู่ในเส้นทางนี้ภายใต้รูปแบบในแองกูลาร์ repoในgithub :

เชิงมุม / แพ็คเกจ / forms / src / directives / ng_model.ts

อาจเป็นเรื่องที่ไม่น่ายินดีนักสำหรับนักพัฒนา AngularJsเนื่องจากคุณสามารถใช้ng-model ได้ทุกที่ทุกเวลาก่อนหน้านี้ แต่เมื่อ Angular พยายามแยกโมดูลเพื่อใช้สิ่งที่คุณต้องการให้คุณใช้ในขณะนั้นngModelอยู่ในFormsModuleในขณะนี้ .

นอกจากนี้ถ้าคุณใช้ReactiveFormsModuleจำเป็นต้องนำเข้าด้วย

ดังนั้นเพียงแค่ค้นหาapp.module.tsและตรวจสอบว่าคุณได้FormsModuleนำเข้ามา ...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //<<<< import it here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule //<<<< and here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

และนี่คือความคิดเห็นเริ่มต้นปัจจุบันสำหรับ Angular4 ngModelในFormsModule :

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

หากคุณต้องการใช้การป้อนข้อมูลของคุณไม่ใช่ในแบบฟอร์มคุณสามารถใช้งานด้วยngModelOptionsและทำให้เป็นจริงแบบสแตนด์อโลน...

[ngModelOptions]="{standalone: true}"

สำหรับข้อมูลเพิ่มเติมดูที่ng_modelในส่วน Angular ที่นี่

คุณต้องนำเข้า FormsModule

เปิดapp.module.ts

และเพิ่มบรรทัด

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

และ

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

การขว้างปาในสิ่งนี้อาจช่วยให้ใครบางคน

สมมติว่าคุณได้สร้าง NgModule ใหม่พูดAuthModuleเพื่อจัดการกับความต้องการของคุณตรวจสอบให้แน่ใจว่าได้นำเข้าFormsModuleใน AuthModule นั้นด้วยมากเกินไป

หากคุณจะใช้FormsModuleเฉพาะในเท่านั้นAuthModuleคุณไม่จำเป็นต้องนำเข้าFormModuleค่าเริ่มต้นAppModule

ดังนั้นสิ่งนี้ในAuthModule:

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

import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [ 
    authRouting,
    FormsModule
   ],
  declarations: [ 
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

จากนั้นลืมเกี่ยวกับการนำเข้าAppModuleถ้าคุณไม่ใช้FormsModuleที่อื่น

Soultion ง่าย ๆ : ใน app.module.ts

ตัวอย่างที่ 1

import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

ตัวอย่างที่ 2

หากคุณต้องการใช้ [(ngModel)] คุณจะต้องนำเข้า FormsModule ใน app.module.ts

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

นำเข้า FormsModule ในโมดูลที่คุณต้องการใช้ [(ngModel)]

มีสองขั้นตอนที่คุณต้องทำตามเพื่อกำจัดข้อผิดพลาดนี้

1. นำเข้า FormsModule ในโมดูลแอปของคุณ
2. ส่งผ่านเป็นค่าการนำเข้าใน @NgModule decorator

โดยทั่วไป app.module.ts ควรมีลักษณะดังนี้:

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';       
    import { AppComponent }  from './app.component';
    import {AppChildComponent} from './appchild.component';
    @NgModule({
      imports:      [ BrowserModule,FormsModule ],
      declarations: [ AppComponent, AppChildComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

หวังว่ามันจะช่วย

คุณต้องนำเข้าFormsModuleในโมดูลรูทของคุณหากส่วนประกอบนี้อยู่ในรูทเช่นapp.module.ts

กรุณาเปิด app.module.ts

นำเข้าFormsModuleจาก@ angular / แบบฟอร์ม

Ex:

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

และ

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

ฉันกำลังใช้ Angular 7

ฉันต้องนำเข้า ReactiveFormsModule เพราะฉันใช้คลาส FormBuilder เพื่อสร้างฟอร์มปฏิกิริยา

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

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

นำเข้าFormsModuleในโมดูลแอปของคุณ

มันจะทำให้แอปพลิเคชันของคุณทำงานได้ดี

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,ContactListCopmponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

หากคุณจำเป็นต้องใช้[(ngModel)]เป็นครั้งแรกที่คุณจำเป็นต้องนำเข้าFormsModuleในapp.module.tsแล้วเพิ่มในรายการของการนำเข้า บางสิ่งเช่นนี้

app.module.ts

1. นำเข้า import {FormsModule} from "@angular/forms";
2. เพิ่มในการนำเข้า imports: [ BrowserModule, FormsModule ],

app.component.ts

1. ตัวอย่าง: <input type="text" [(ngModel)]="name" >
2. แล้ว <h1>your name is: {{name}} </h1>

ngModel เป็นส่วนหนึ่งของ FormsModule และควรนำเข้าจาก @ angular / แบบฟอร์มเพื่อทำงานกับ ngModel

โปรดเปลี่ยน app.module.ts ดังนี้:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

หากบางคนยังคงได้รับข้อผิดพลาดหลังจากใช้โซลูชันที่ยอมรับอาจเป็นเพราะคุณมีไฟล์โมดูลแยกต่างหากสำหรับส่วนประกอบที่คุณต้องการใช้คุณสมบัติ ngModel ในแท็กอินพุต ในกรณีดังกล่าวให้ใช้โซลูชันที่ยอมรับในไฟล์ module.ts ของคอมโพเนนต์เช่นกัน

ฉันกำลังใช้ Angular 5

ในกรณีของฉันฉันต้องนำเข้า RactiveFormsModule ด้วย

app.module.ts (หรือ anymodule.module.ts)

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

ฉันรู้ว่าคำถามนี้เกี่ยวกับ Angular 2 แต่ฉันอยู่ที่ Angular 4 และไม่มีคำตอบเหล่านี้ช่วย

ใน Angular 4 ต้องมีไวยากรณ์

[(ngModel)]

หวังว่านี่จะช่วยได้

หากคุณยังคงได้รับข้อผิดพลาดหลังจากนำเข้า FormsModule อย่างถูกต้องให้ตรวจสอบเครื่องเทอร์มินัลของคุณหรือ (คอนโซล windows) เนื่องจากโครงการของคุณไม่ได้รวบรวม (เนื่องจากข้อผิดพลาดอื่นที่อาจเป็นอะไรก็ได้) และโซลูชันของคุณไม่ปรากฏในเบราว์เซอร์ของคุณ!

ในกรณีของฉันคอนโซลของฉันมีข้อผิดพลาดที่ไม่เกี่ยวข้องต่อไปนี้: คุณสมบัติ 'restoreGithubUser' ไม่มีอยู่ในประเภท 'ApiService'

ในโมดูลคุณยินดีที่จะใช้ngModelคุณต้องนำเข้าFormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

ngModelมาจาก FormsModule มีบางกรณีที่คุณสามารถรับข้อผิดพลาดประเภทนี้ได้:

1. คุณไม่ได้นำเข้า FormsModule ไปยังอาร์เรย์การนำเข้าของโมดูลที่มีการประกาศส่วนประกอบของคุณส่วนประกอบที่ใช้ ngModel
2. คุณได้นำเข้า FormsModule ไปยังโมดูลหนึ่งซึ่งสืบทอดมาจากโมดูลอื่น ในกรณีนี้คุณมีสองตัวเลือก:
   • ปล่อยให้ FormsModule ถูกอิมพอร์ตเข้าในอาร์เรย์การนำเข้าจากทั้งโมดูล: module1 และ module2 ตามกฎ: การอิมพอร์ตโมดูลไม่ได้ให้สิทธิ์การเข้าถึงโมดูลที่อิมพอร์ต (การอิมพอร์ตไม่ถูกสืบทอด)

• ประกาศ FormsModule ในอาร์เรย์การนำเข้าและส่งออกใน module1 เพื่อให้สามารถดูได้ใน model2 ด้วย

3. (ในบางรุ่นฉันประสบปัญหานี้) คุณได้นำเข้า FormsModule อย่างถูกต้อง แต่ปัญหาอยู่ที่แท็ก HTML อินพุต คุณต้องเพิ่มแอททริบิวของแท็กชื่อสำหรับอินพุตและชื่อวัตถุที่ผูกไว้ใน [(ngModel)] จะต้องเหมือนกับชื่อในแอตทริบิวต์ชื่อ

   

ในngModuleคุณจำเป็นต้องนำเข้าFormsModuleเพราะมาจากngModel FormsModuleโปรดแก้ไขapp.module.tsของคุณเช่นรหัสด้านล่างที่ฉันแบ่งปัน

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    declarations: [
         AppComponent,
         HomeComponent
    ],
    imports: [
         BrowserModule,
         AppRoutingModule,
         FormsModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

นำเข้า FormModule และ app.module

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule     
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

บางครั้งคุณได้รับข้อผิดพลาดนี้เมื่อคุณพยายามใช้ส่วนประกอบจากโมดูลซึ่งไม่ได้แชร์ในโมดูลอื่น

ตัวอย่างเช่นคุณมี 2 โมดูลที่มี module1.componentA.component.ts และ module2.componentC.component.ts และคุณพยายามใช้ตัวเลือกจาก module1.componentA.component.ts ในเทมเพลตภายใน module2 (เช่น<module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">) มันจะโยน ข้อผิดพลาดที่ someInputVariableInModule1 ไม่พร้อมใช้งานภายใน module1.componentA.component.ts - แม้ว่าคุณจะมี@Input() someInputVariableInModule1ใน module1.componentA

หากสิ่งนี้เกิดขึ้นคุณต้องการแบ่งปัน module1.componentA เพื่อให้สามารถเข้าถึงได้ในโมดูลอื่น ดังนั้นหากคุณแบ่งปัน module1.componentA ภายใน sharedModule นั้น module1.componentA จะสามารถใช้งานได้ในโมดูลอื่น ๆ (นอกจากโมดูล 1) และทุกโมดูลที่นำเข้า sharedModule จะสามารถเข้าถึงตัวเลือกในเทมเพลตของพวกเขาที่ฉีด@Input()ตัวแปรที่ประกาศไว้

สำหรับสถานการณ์ของฉันฉันต้องนำเข้าทั้ง [CommonModule] และ [FormsModule] ไปยังโมดูลของฉัน

import { NgModule } from '@angular/core' 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { MyComponent } from './mycomponent'

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }

คุณต้องนำเข้า FormsModule

เปิดapp.module.ts

และเพิ่มบรรทัด

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

และ

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

บางครั้งถ้าเราจะนำเข้าแล้วBrowserModule, FormsModuleและโมดูลที่เกี่ยวข้องอื่น ๆ แต่ผมมีข้อผิดพลาดเดียวกันแล้วฉันตระหนักว่าเราต้องนำพวกเขาในการสั่งซื้อในกรณีของฉันฉันพลาด ดังนั้นเพื่อที่ควรเป็นเช่น BrowserModule, ,FormsModuleReactiveFormsModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule     
  ],
  providers: [],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

หวังว่านี่จะช่วยใครซักคน .. :)

นี่สำหรับคนที่ใช้ JavaScript ธรรมดาแทนที่จะเป็น Type Script นอกเหนือจากการอ้างอิงไฟล์สคริปต์แบบฟอร์มที่ด้านบนของหน้าเช่นด้านล่าง

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

ng.forms.FormsModuleคุณควรบอกโหลดโมดูลโหลด หลังจากทำการเปลี่ยนแปลงimportsคุณสมบัติNgModuleวิธีการของฉันดูเหมือนด้านล่าง

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

การเข้ารหัสที่มีความสุข!

ฉันอัปเกรดจาก RC1 เป็น RC5 และได้รับข้อผิดพลาดนี้

ฉันเสร็จสิ้นการย้ายข้อมูลของฉัน (แนะนำapp.module.tsไฟล์ใหม่เปลี่ยนpackage.jsonเป็นเวอร์ชั่นใหม่และโมดูลที่หายไปและในที่สุดก็เปลี่ยนmain.tsเป็น boot ตามลำดับจากAngular2 quick start ตัวอย่าง )

ฉันทำnpm updateแล้วและnpm outdatedเพื่อยืนยันเวอร์ชันที่ติดตั้งนั้นถูกต้อง แต่ก็ยังไม่มีโชค

ฉันสิ้นสุดการลบnode_modulesโฟลเดอร์อย่างสมบูรณ์และติดตั้งใหม่ด้วยnpm install- Voila! แก้ไขปัญหา.

ตอนที่ฉันทำการสอนครั้งแรก main.ts ดูแตกต่างจากตอนนี้เล็กน้อย มันดูคล้ายกันมาก แต่ให้สังเกตความแตกต่าง (ด้านบนถูกต้อง)

แก้ไข:

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

platformBrowserDynamic().bootstrapModule(AppModule);

รหัสการสอนเก่า:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

เพิ่มรหัสไปยัง app.module.ts มันใช้ได้สำหรับฉัน:

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

[...]

@NgModule({
imports: [
[...]
FormsModule
],
[...]
})