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

ฉันใช้ Angular 4 และฉันได้รับข้อผิดพลาดในคอนโซล:

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

ฉันจะแก้ไขปัญหานี้ได้อย่างไร

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

แก้ไข

เนื่องจากมีคำถามซ้ำซ้อนกันจำนวนมากที่มีปัญหาเดียวกันฉันจึงปรับปรุงคำตอบนี้

มีสองเหตุผลที่เป็นไปได้

• ไม่มีFormsModuleดังนั้นจึงเพิ่มสิ่งนี้ไปยังโมดูลของคุณ

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

• ตรวจสอบไวยากรณ์ / การสะกดคำ[(ngModel)]ในแท็กอินพุต

นี่คือคำตอบที่ถูก คุณต้องนำเข้า FormsMoudle

ที่หนึ่งใน app.module.ts

**

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

** วินาทีใน app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

ขอแสดงความนับถือและหวังว่าจะเป็นประโยชน์

คุณngModelไม่ได้ทำงานเพราะไม่ได้เป็นส่วนหนึ่งของคุณNgModuleเลย

คุณต้องบอกNgModuleว่าคุณมีอำนาจที่จะใช้ngModelตลอดทั้งแอปของคุณคุณสามารถทำมันได้โดยการเพิ่มFormsModuleเข้ามาของคุณapp.module.ts-> ->imports[]

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

ฉันพบข้อผิดพลาดนี้เมื่อทดสอบแอป Angular 6 กับ Karma / Jasmine ฉันได้นำเข้าแล้วFormsModuleในโมดูลระดับบนสุดของฉัน แต่เมื่อฉันเพิ่มองค์ประกอบใหม่ที่ใช้[(ngModel)]การทดสอบของฉันเริ่มล้มเหลว ในกรณีนี้ผมต้องนำเข้าในของฉันFormsModuleTestBed TestingModule

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));

ในการapp.module.tsเพิ่มนี้:

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

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

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

ฉันลองทุกสิ่งที่กล่าวมาข้างต้น แต่ก็ยังไม่ทำงาน

แต่ในที่สุดฉันก็พบปัญหาในไซต์ Angular ลองนำเข้า formModule ใน module.ts นั่นแหละ

ลองเพิ่ม

ngModel ในระดับโมดูล

รหัสเหมือนข้างต้น

ปรับปรุงกับ7.xx เชิงมุม , พบปัญหาเดียวกันในหนึ่งของฉันโมดูล

ถ้ามันอยู่ในโมดูลอิสระของคุณเพิ่มโมดูลพิเศษเหล่านี้:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

ถ้ามันอยู่ในของคุณapp.module.tsเพิ่มโมดูลเหล่านี้:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

ตัวอย่างง่าย ๆที่จะพิสูจน์กรณี

ngModelคำตอบสำหรับฉันคือการสะกดคำผิด ผมเคยเขียนไว้เช่นนี้ในขณะที่มันควรจะเป็นngModulengModel

เห็นได้ชัดว่าความพยายามอื่น ๆ ทั้งหมดล้มเหลวในการแก้ไขข้อผิดพลาดสำหรับฉัน

import { FormsModule } from '@angular/forms'; // <<<< นำเข้าที่นี่

BrowserModule, FormsModule // <<<< และที่นี่

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

ReactiveFormsModuleในกรณีของฉันฉันจะเพิ่มการนำเข้าที่ขาดหายไปซึ่งเป็น

นำเข้าโมดูลฟอร์มใน app.module.ts

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

ใน html:

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">

ในกรณีของฉันฉันสะกดผิดฉันหมายถึง ngmodel istead ของ ng M odel :) หวังว่าจะช่วยได้!

คาดหวัง - [(ngModel)] จริง - [(ngmodel)]

คุณควรตรวจสอบสิ่งต่อไปนี้หากการผูกสองทางไม่ทำงาน

ใน html ngModel ควรถูกเรียกด้วยวิธีนี้ ไม่มีการพึ่งพาแอตทริบิวต์อื่นขององค์ประกอบอินพุต

<input [(ngModel)]="inputText">

ตรวจสอบให้แน่ใจว่า FormsModule ถูกนำเข้าไปยังไฟล์โมดูล app.modules.ts

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

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent // suppose, this is the component in which you are trying to use two ay binding
    ],
    imports: [
        BrowserModule,
        FormsModule,
        // other modules
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

ตรวจสอบให้แน่ใจว่ามีการเพิ่มส่วนประกอบที่คุณพยายามใช้ ngModel สำหรับการผูกสองวิธีในการประกาศของ เพิ่มรหัสในจุดก่อนหน้า # 2

นี่คือทุกสิ่งที่คุณต้องทำเพื่อให้การผูกสองทางโดยใช้งาน ngModel นี่เป็นการตรวจสอบถึงมุมฉาก 9

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

ใน app.module.ts เพิ่มบรรทัดด้านล่าง:

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

[...]

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

แรกนำเข้า FormsModule แล้วใช้ ngModel ใน component.ts ของคุณ

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

รหัส HTML:

<input type='text' [(ngModel)] ="usertext" />

หากแม้หลังจากการนำเข้า formmodule ยังคงมีปัญหาอยู่ให้ตรวจสอบว่าอินพุตของคุณไม่มีแอตทริบิวต์ "ชื่อ" ที่มีค่าเท่ากับอินพุตอื่นในหน้า