web-dev-qa-db-ja.com

Angular 4 - 「入力の既知のプロパティではないため、「ngModel」にバインドできません」エラー

私はAngular 4を使用していますが、コンソールにエラーが表示されます。

'ngModel'は 'input'の既知のプロパティではないためバインドできません

どうすればこれを解決できますか？

angularangular-ngmodel
159
Vijay Kumar

フォーム入力に双方向のデータバインディングを使用するには、Angular module にFormsModuleパッケージをインポートする必要があります。

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

@NgModule({
    imports: [
         FormsModule      
    ]

_編集_

同じ問題を持つ重複した質問がたくさんあるので、私はこの答えを強化しています。

考えられる理由は2つあります。

  • FormsModuleがないので、これをあなたのモジュールに追加してください。

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

@NgModule({
    imports: [
        FormsModule      
    ]

  • Inputタグの[(ngModel)]の構文/つづりを確認してください

404
Sajeetharan

これは正しい答えです。 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の2番目の** 

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

よろしくおねがいします。

10
Hatem

Karma/JasmineでAngular 6 Appをテストしたところ、このエラーに遭遇しました。最上位モジュールにFormsModuleをインポートしました。しかし、[(ngModel)]を使用する新しいコンポーネントを追加したとき、私のテストは失敗し始めました。この場合、私はFormsModuleをTestBedTestingModuleにインポートする必要がありました。

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

まだあなたのngModelの一部ではないので、あなたのNgModuleは機能していません。

あなたはNgModuleにあなたがアプリを通してngModelを使う権限を持っていることを伝えなければなりません、あなたのFormsModuleをapp.module.ts - > imports-> []。

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })
5
Shubham Verma

追加してみてください 

モジュールレベルのngModel

コードは上記と同じです

2
Thoopalliamar

app.module.tsにこれを追加します。

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

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

enter image description here 上記のすべてを試しましたが、まだ機能していません。

しかし、最終的にAngular siteで問題を見つけました。module.tsにformModuleをインポートしてみてください。 enter image description here

1
Arpit Sharma

上記の問題の解決法はすべて正しいです。しかし、遅延ロードを使用している場合は、FormsModuleをフォームを持つ子モジュールにインポートする必要があります。 app.module.tsに追加しても役に立ちません。

0
Ramya

追加する必要があります

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

imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
0
Laxmichand Dhuvare

私の場合、足りないインポートを追加しました。それはReactiveFormsModuleです。

0
S34N

最初にFormsModuleをインポートしてから、component.tsでngModelを使用します。

@NgModule({
    imports: [
         FormsModule  ];
<input type='text' [(ngModel)] ="usertext" />
0
Shakti Srivastav

Angular 7.x.xで更新し、my modules のいずれかで同じ問題が発生する。 

それがあなたの独立したモジュールにあるならば、これらの追加モジュールを追加してください：

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

ケースを証明する簡単な デモ 。 

0
Hearen
    //import form module in app.module.ts.

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


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

    //In html
    <input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">
0
Brahmmeswara Rao Palepu

フォーム入力に双方向データバインディングを使用する場合は、AngularモジュールにFormsModuleパッケージをインポートする必要があります。詳細については、Angular 2公式チュートリアルおよびフォームの公式ドキュメントを参照してください。

app.module.tsに以下の行を追加します。

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
0
Swapnil G Thaware

私への答えはngModelの間違ったスペルでした。私はそれを次のように書いてもらいました：ngModule、それはngModelであるべきです。

他のすべての試みは明らかに私のためのエラーを解決するために失敗しました。

0
Dyary

import { FormsModule } from '@angular/forms'; // <<<<ここにインポートする

BrowserModule, FormsModule // <<<<とここ

それで、単にapp.module.tsまたは他のモジュールファイルを探して、FormsModuleがインポートされていることを確認します.

0
Manoj Gohel