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 đã gặp lỗi sau khi khởi chạy ứng dụng Angular của mình, ngay cả khi thành phần không được hiển thị.

Tôi phải bình luận <input>để ứng dụng của tôi hoạt động.

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: 

Tôi đang nhìn vào Plunker Hero, nhưng tôi không thấy bất kỳ sự khác biệt nào từ mã của tôi.

Đây là tập tin thành phần:

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";
}

Vâng, đó là, trong app.module.ts, tôi vừa thêm:

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

[...]

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

Để có thể 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 Angularmô-đun của mình . Để biết thêm thông tin, xem Angular 2hướng dẫn chính thức ở đây và tài liệu chính thức cho các biểu mẫu

Để sử dụng [(ngModel)]trong Angular 2 , 4 & 5+ , bạn cần nhập FormsModule từ dạng Angular ...

Ngoài ra, nó là trong đường dẫn này dưới các hình thức trong Angular repo trong github :

góc / gói / hình thức / src / chỉ thị / ng_model.ts

Có lẽ đây không phải là một niềm vui rất cho các nhà phát triển AngularJs như bạn có thể sử dụng ng mô hình ở khắp mọi nơi bất cứ lúc nào trước đây, nhưng khi cố gắng góc để các module riêng biệt để sử dụng bất cứ điều gì bạn muốn bạn muốn sử dụng vào thời điểm đó, ngModel là trong FormsModule nay .

Ngoài ra nếu bạn đang sử dụng ReactiveFormsModule, bạn cũng cần phải nhập nó.

Vì vậy, chỉ cần tìm app.module.ts và đảm bảo bạn đã FormsModulenhập trong ...

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

Ngoài ra, đây là nhận xét bắt đầu hiện tại cho Angular4 ngModeltrong 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!
 */

Nếu bạn muốn sử dụng đầu vào của mình, không phải ở dạng, bạn có thể sử dụng nó với ngModelOptionsvà biến độc lập thành sự thật ...

[ngModelOptions]="{standalone: true}"

Để biết thêm thông tin, hãy xem ng_model trong phần Angular tại đây

Bạn cần nhập FormsModule

Mở app.module.ts

và thêm dòng

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

và

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

Ném vào đây có thể giúp một ai đó.

Giả sử bạn đã tạo NgModule mới, giả sử AuthModuledành riêng để xử lý các nhu cầu Auth của bạn, hãy đảm bảo nhập FormsModulevào AuthModule đó .

Nếu bạn sẽ sử dụng FormsModuleCHỈ trong AuthModulethì bạn sẽ không cần nhập FormModuleIN mặc địnhAppModule

Vì vậy, một cái gì đó như thế này trong 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 { }

Sau đó, quên việc nhập vào AppModulenếu bạn không sử dụng FormsModulebất cứ nơi nào khác.

Linh hồn đơn giản: Trong app.module.ts

ví dụ 1

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

imports: [
 BrowserModule,
 FormsModule
 ],

Ví dụ 2

Nếu bạn muốn sử dụng [(ngModel)] thì bạn phải nhập FormsModule trong app.module.ts

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

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

Nhập FormsModule trong các mô-đun mà bạn muốn sử dụng [(ngModel)]

Có hai bước bạn cần làm theo để thoát khỏi lỗi này

1. nhập FormsModule trong mô-đun ứng dụng của bạn
2. Vượt qua nó như giá trị nhập khẩu trong trang trí @NgModule

về cơ bản app.module.ts sẽ giống như dưới đây:

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

Hy vọng nó giúp

Bạn cần nhập FormsModule trong mô-đun gốc của mình nếu thành phần này nằm trong root tức là app.module.ts

Vui lòng mở app.module.ts

Nhập FormsModule từ @ angular / Forms

Ví dụ:

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

và

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

Tôi đang sử dụng Angular 7

Tôi phải nhập ReactiveFormsModule vì tôi đang sử dụng lớp FormBuilder để tạo biểu mẫu phản ứng.

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

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

nhập FormsModule trong mô-đun ứng dụng của bạn.

nó sẽ cho phép ứng dụng của bạn chạy tốt

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

Nếu bạn cần sử dụng [(ngModel)]trước, bạn cần nhập FormsModulevào app.module.tsvà sau đó thêm vào danh sách nhập. Một cái gì đó như thế này:

app.module.ts

1. nhập khẩu import {FormsModule} from "@angular/forms";
2. thêm hàng nhập khẩu imports: [ BrowserModule, FormsModule ],

app.component.ts

1. Thí dụ: <input type="text" [(ngModel)]="name" >
2. và sau đó <h1>your name is: {{name}} </h1>

ngModel là một phần của FormsModule. Và nó nên được nhập từ @ angular / Forms để hoạt động với ngModel.

Vui lòng thay đổi app.module.ts như sau:

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

[...]

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

Nếu ai đó vẫn gặp lỗi sau khi áp dụng giải pháp được chấp nhận, điều đó có thể là do bạn có một tệp mô-đun riêng cho thành phần mà bạn muốn sử dụng thuộc tính ngModel trong thẻ đầu vào. Trong trường hợp đó, hãy áp dụng giải pháp được chấp nhận trong tệp module.ts của thành phần.

Tôi đang sử dụng Angular 5.

Trong trường hợp của tôi, tôi cũng cần phải nhập RactiveFormsModule.

app.module.ts (hoặc anymodule.module.ts)

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

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

Tôi biết câu hỏi này là về Angular 2, nhưng tôi thuộc Angular 4 và không có câu trả lời nào trong số này giúp được.

Trong Angular 4, cú pháp cần phải là

[(ngModel)]

Hi vọng điêu nay co ich.

nếu bạn vẫn gặp lỗi sau khi nhập FormsModule một cách chính xác thì hãy kiểm tra thiết bị đầu cuối hoặc (bảng điều khiển windows) vì dự án của bạn không được biên dịch (vì một lỗi khác có thể là bất cứ điều gì) và giải pháp của bạn chưa được phản ánh trong trình duyệt của bạn!

Trong trường hợp của tôi, bảng điều khiển của tôi có lỗi không liên quan như sau: Thuộc tính 'lấyGithubUser' không tồn tại trên loại 'ApiService'.

Trong mô-đun bạn sẵn sàng sử dụng ngModel, bạn phải nhập FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

ngModel đến từ FormsModule. Có một số trường hợp khi bạn có thể nhận được loại lỗi này:

1. Bạn đã không nhập FormsModule vào mảng nhập mô-đun nơi thành phần của bạn được khai báo, thành phần trong đó ngModel được sử dụng.
2. Bạn đã nhập FormsModule vào một mô-đun được kế thừa từ một mô-đun khác. Trong trường hợp này, bạn có hai lựa chọn:
   • hãy để FormsModule được nhập vào mảng nhập từ cả hai mô-đun: module1 và module2. Theo quy tắc: Nhập mô-đun KHÔNG cung cấp quyền truy cập vào mô-đun đã nhập. (Nhập khẩu không được kế thừa)

• khai báo FormsModule vào các mảng nhập và xuất trong module1 để có thể nhìn thấy nó trong model2

3. (Trong một số phiên bản tôi gặp phải vấn đề này) Bạn đã nhập chính xác FormsModule nhưng vấn đề nằm ở thẻ HTML đầu vào. Bạn phải thêm thuộc tính thẻ tên cho đầu vào và tên ràng buộc đối tượng trong [(ngModel)] phải giống với tên vào thuộc tính tên

   

Trong ngModulebạn cần phải nhập FormsModule, bởi vì ngModelđến từ FormsModule. Vui lòng sửa đổi app.module.ts của bạn như mã dưới đây tôi đã chia sẻ

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

nhập FormModule một 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 {}

Đôi khi bạn gặp lỗi này khi bạn cố gắng sử dụng một thành phần từ một mô-đun, không được chia sẻ, trong một mô-đun khác.

Ví dụ: bạn có 2 mô-đun với module1.componentA.component.ts và module2.componentC.component.ts và bạn cố gắng sử dụng bộ chọn từ module1.componentA.component.ts trong một mẫu bên trong module2 (ví dụ <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">), nó sẽ ném lỗi mà someInputVariableInModule1 không có sẵn bên trong module1.componentA.component.ts - ngay cả khi bạn có @Input() someInputVariableInModule1trong module1.componentA.

Nếu điều này xảy ra, bạn muốn chia sẻ module1.componentA để có thể truy cập được trong các mô-đun khác. Vì vậy, nếu bạn chia sẻ module1.componentA bên trong sharedModule, module1.componentA sẽ có thể sử dụng được bên trong các mô-đun khác (bên ngoài mô-đun 1) và mọi mô-đun nhập sharedModule sẽ có thể truy cập vào bộ chọn trong các mẫu của chúng khi tiêm @Input()biến khai báo.

Đối với kịch bản của tôi, tôi đã phải nhập cả [CommonModule] và [FormsModule] vào mô-đun của mình

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

Bạn cần nhập FormsModule

Mở app.module.ts

và thêm dòng

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

và

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

Đôi khi nếu chúng ta đã nhập khẩu BrowserModule, FormsModulevà module khác có liên quan mặc dù tôi đã cùng một lỗi sau đó tôi nhận ra rằng chúng tôi cần nhập khẩu chúng trong thứ tự , trong trường hợp của tôi, tôi bỏ lỡ nó. Vì vậy, để nên giống như BrowserModule, FormsModule, ReactiveFormsModule.

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

Hy vọng điều này sẽ giúp được ai đó .. :)

Cái này dành cho những người sử dụng JavaScript đơn giản thay vì Type Script. Ngoài việc tham khảo tệp tập lệnh biểu mẫu trên đầu trang như bên dưới

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

bạn cũng nên nói với trình tải mô-đun để tải ng.forms.FormsModule. Sau khi thực hiện các thay đổi, importsthuộc tính của NgModulephương thức của tôi trông như dưới đây

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

Chúc mừng mã hóa!

Tôi đã nâng cấp từ RC1 lên RC5 và nhận được lỗi này.

Tôi đã hoàn thành quá trình di chuyển của mình (giới thiệu một app.module.tstệp mới , thay đổi package.jsonđể bao gồm các phiên bản mới và các mô-đun bị thiếu và cuối cùng thay đổi main.tsđể tôi khởi động tương ứng, dựa trên ví dụ bắt đầu nhanh Angular2 ).

Tôi đã làm một npm updatevà sau đó một npm outdatedđể xác nhận các phiên bản được cài đặt là chính xác, vẫn không gặp may.

Cuối cùng tôi đã xóa hoàn toàn node_modulesthư mục và cài đặt lại npm install- Voila! Vấn đề được giải quyết.

Khi tôi lần đầu tiên thực hiện hướng dẫn, main.ts trông hơi khác so với bây giờ. Nó trông rất giống nhau, nhưng lưu ý sự khác biệt (cái trên cùng là chính xác).

Chính xác:

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

platformBrowserDynamic().bootstrapModule(AppModule);

Mã hướng dẫn cũ:

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

thêm mã vào app.module.ts Nó hoạt động với tôi:

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

[...]

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