Lỗi góc: Tiết không thể liên kết với 'ngModel' vì đây không phải là thuộc tính được biết đến của 'đầu vào'

Tôi đang sử dụng Angular 4 và tôi gặp lỗi trong bảng điều khiển:

Không thể liên kết với 'ngModel' vì đây không phải là thuộc tính được biết đến của 'đầu vào'

Làm thế nào tôi có thể giải quyết điều này?

Để sử dụng liên kết dữ liệu hai chiều cho đầu vào biểu mẫu, bạn cần nhập FormsModulegói trong mô-đun Angular của mình.

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

@NgModule({
    imports: [
         FormsModule      
    ]

BIÊN TẬP

Vì có rất nhiều câu hỏi trùng lặp với cùng một vấn đề, tôi đang tăng cường câu trả lời này.

Có hai lý do có thể

• Thiếu FormsModule, do đó Thêm cái này vào Module của bạn,

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

• Kiểm tra cú pháp / chính tả [(ngModel)]trong thẻ đầu vào

Đây là một câu trả lời đúng. bạn cần nhập FormsMoudle

đầu tiên trong 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 { }

** thứ hai trong 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();
  }));

Trân trọng và hy vọng sẽ hữu ích

Bạn ngModelkhông làm việc vì nó chưa phải là một phần của bạn NgModule.

Bạn phải nói với NgModulebạn rằng bạn có quyền sử dụng ngModeltrong toàn bộ ứng dụng của mình, Bạn có thể làm điều đó bằng cách thêm FormsModulevào app.module.ts-> imports-> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

Tôi gặp phải lỗi này khi kiểm tra Ứng dụng Angular 6 của mình với Karma / Jasmine. Tôi đã nhập FormsModuletrong mô-đun cấp cao nhất của tôi. Nhưng khi tôi thêm một thành phần mới sử dụng [(ngModel)]các bài kiểm tra của tôi đã bắt đầu thất bại. Trong trường hợp này, tôi cần phải nhập khẩu FormsModulecủa tôi TestBed TestingModule.

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

Tất cả các giải pháp được đề cập ở trên cho vấn đề là chính xác. Nhưng nếu bạn đang sử dụng tải chậm, FormsModulecần phải được nhập trong mô đun con có các biểu mẫu trong đó. Thêm nó vào app.module.tssẽ không giúp đỡ.

Trong app.module.tsthêm này:

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

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

Tôi đã thử tất cả những điều được đề cập ở trên, nhưng nó vẫn không hoạt động.

nhưng cuối cùng tôi đã tìm thấy vấn đề trong trang Angular. Hãy thử nhập formModule trong module.ts đó là nó.

Hãy thử thêm

ngModel ở cấp độ mô-đun

Mã giống như trên

Cập nhật với Angular 7.xx , gặp phải vấn đề tương tự trong một trong các mô-đun của tôi .

Nếu nó nằm trong mô-đun độc lập của bạn, hãy thêm các mô-đun bổ sung sau:

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

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

Nếu nó nằm trong của bạn app.module.ts, hãy thêm các mô-đun sau:

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

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

Một bản demo đơn giản để chứng minh trường hợp.

Câu trả lời cho tôi là sai chính tả ngModel. Tôi đã có nó được viết như thế này: ngModuletrong khi nó nên được ngModel.

Tất cả các nỗ lực khác rõ ràng không thể giải quyết lỗi cho tôi.

import { FormsModule } from '@angular/forms'; // <<<< nhập nó vào đây

BrowserModule, FormsModule // <<<< và ở đây

Vì vậy, chỉ cần tìm app.module.tshoặc một tệp mô-đun khác và đảm bảo bạn đã FormsModulenhập trong ...

Trong trường hợp của tôi, tôi đã thêm phần nhập bị thiếu, đó là ReactiveFormsModule.

mô-đun nhập khẩu trong app.module.ts.

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


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

Trong html:

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

Trong trường hợp của tôi, tôi viết sai chính tả, tôi đã đề cập đến ngmodel istead của ng M odel :) Hy vọng nó sẽ giúp!

Dự kiến ​​- [(ngModel)] Thực tế - [(ngmodel)]

Bạn nên xác minh những điều sau nếu ràng buộc hai chiều không hoạt động.

Trong html, ngModel nên được gọi theo cách này. Không có sự phụ thuộc vào thuộc tính khác của yếu tố đầu vào

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

Đảm bảo FormsModule được nhập vào tệp mô-đun 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 { }

Hãy chắc chắn rằng thành phần mà bạn đang cố gắng sử dụng ngModel cho ràng buộc hai chiều được thêm vào trong các khai báo của. Mã được thêm vào ở điểm trước # 2

Đây là tất cả mọi thứ bạn cần làm để thực hiện ràng buộc hai chiều bằng cách sử dụng ngModel, điều này được xác thực cho đến góc 9

Nếu bạn muốn sử dụng liên kết dữ liệu hai chiều cho đầu vào biểu mẫu, bạn cần nhập gói FormsModule trong mô-đun Angular của mình. Để biết thêm thông tin, xem hướng dẫn chính thức của Angular 2 tại đây và tài liệu chính thức cho các biểu mẫu

trong app.module.ts thêm dòng dưới đây:

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

[...]

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

đầu tiên nhập FormsModule và sau đó sử dụng ngModel trong thành phần của bạn.

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

Mã HTML:

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

Nếu ngay cả sau khi nhập biểu mẫu, vấn đề vẫn tồn tại, hãy kiểm tra xem Đầu vào của bạn không có thuộc tính "tên" có giá trị bằng với đầu vào khác trên trang.