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

Angular 4を使用していますが、コンソールでエラーが発生します：

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

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

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

編集

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

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

• が見つからない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の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();
  }));

よろしくお願いいたします。

あなたngModelはNgModuleまだあなたの一部ではないのであなたは働いていません。

あなたは伝える必要がありますNgModuleあなたが使用する権限を持っていることをngModelあなたが追加することによってそれを行うことができ、あなたのアプリを通じてFormsModuleあなたへapp.module.ts> - imports- > []。

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

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

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

上記の問題の解決策はすべて正しいです。ただし、遅延読み込みを使用している場合FormsModuleは、フォームが含まれている子モジュールにインポートする必要があります。それを追加してapp.module.tsも役に立ちません。

これをapp.module.ts追加：

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

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

上記のことをすべて試しましたが、うまくいきません。

しかし、最後にAngularサイトで問題を見つけました。module.tsにformModuleをインポートしてみてください。

追加してみてください

モジュールレベルのngModel

コードは上記と同じです

Angular 7.xxで更新すると、私のモジュールの 1つで同じ問題が発生します。

独立したモジュールにある場合は、次の追加モジュールを追加します。

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。私はそれをこのように書いngModuleてもらいましたngModel。

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

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

私の場合、スペルを間違えたので、ng M odelではなくngmodelと呼んでいました:) 参考になりますように！

予想-[（ngModel）]実際-[（ngmodel）]

双方向バインディングが機能しない場合は、次のことを確認する必要があります。

HTMLでは、ngModelをこのように呼び出す必要があります。input要素の他の属性に依存していません

<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まで検証されます

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

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

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

[...]

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

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

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTMLコード：

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

formsmoduleをインポートした後でも問題が解決しない場合は、入力に、ページ上の別の入力と等しい値を持つ「name」属性がないことを確認してください。