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

Angularアプリを起動すると、コンポーネントが表示されていなくても、次のエラーが発生します。

<input>アプリが機能するようにコメントアウトする必要があります。

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: 

私はヒーロープランカーを見ていますが、コードとの違いはありません。

コンポーネントファイルは次のとおりです。

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

はい、それだけです。app.module.tsに、追加したばかりです。

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

[...]

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

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

使用するため[(ngModel)]に角度2、4＆5+、あなたは輸入に必要FormsModuleアンギュラ形から...

また、githubのAngular repoのフォームの下のこのパスにもあります：

angular /パッケージ/フォーム/ src /ディレクティブ/ ng_model.ts

おそらく、これがために非常に喜びはないAngularJs開発者は、あなたが使用できるようNG-モデルをいつでも前に、どこでも、しかし、あなたが好きなものは何でも利用する別々のモジュールに対する角度試みとして、一度に使用するために、ngModelはであるFormsModule今。

また、ReactiveFormsModuleを使用している場合は、それもインポートする必要があります。

したがって、単にapp.module.tsを探して、FormsModuleインポートされたことを確認します...

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

また、これはFormsModule ngModelにおけるAngular4の現在の開始コメントです。

/**
 * `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!
 */

フォームではなく入力を使用したい場合は、を使用してngModelOptionsスタンドアロンをtrueにできます...

[ngModelOptions]="{standalone: true}"

詳細については、こちらの Angularセクションのng_modelを参照してください

FormsModuleをインポートする必要があります

app.module.tsを開きます

と行を追加

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

そして

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

これを投げることは誰かを助けるかもしれません。

AuthModuleAuthニーズの処理専用の新しいNgModuleを作成したと仮定してFormsModule、そのAuthModuleにもインポートしてください。

でFormsModuleのみ使用するAuthModule場合は、FormModuleINをデフォルトでインポートする必要はありません。AppModule

ので、このようなもの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 { }

次にAppModule、FormsModule他の場所を使用しない場合は、インポートを忘れます。

Simple Soultion： app.module.ts内

例1

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

imports: [
 BrowserModule,
 FormsModule
 ],

例2

[（ngModel）]を使用する場合は、appsmodule.tsにFormsModuleをインポートする必要があります

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

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

[（ngModel）]を使用するモジュールにFormsModuleをインポートします

このエラーを解消するには、2つの手順を実行する必要があります

1. アプリモジュールにFormsModuleをインポートする
2. @NgModuleデコレータでインポートの値として渡します

基本的にapp.module.tsは次のようになります。

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

それが役に立てば幸い

このコンポーネントがルートにある場合、つまりapp.module.tsの場合、ルートモジュールにFormsModuleをインポートする必要があります。

親切にapp.module.tsを開いてください

@ angular / formsからFormsModuleをインポートする

例：

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

そして

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

Angular 7を使用しています

FormBuilderクラスを使用して反応性フォームを作成しているため、ReactiveFormsModuleをインポートする必要があります。

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

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

アプリモジュールにFormsModuleをインポートします。

それはあなたのアプリケーションがうまく動くようにします。

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

[(ngModel)]最初に使用する必要がある場合は、インポートFormsModuleしてapp.module.tsから、インポートのリストに追加する必要があります。このようなもの：

app.module.ts

1. インポート import {FormsModule} from "@angular/forms";
2. インポートに追加 imports: [ BrowserModule, FormsModule ],

app.component.ts

1. 例： <input type="text" [(ngModel)]="name" >
2. その後 <h1>your name is: {{name}} </h1>

ngModelはFormsModuleの一部です。そして、ngModelで動作するように@ angular / formsからインポートする必要があります。

app.module.tsを次のように変更してください：

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

[...]

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

承認されたソリューションを適用した後もエラーが発生する場合は、入力タグでngModelプロパティを使用するコンポーネント用に別のモジュールファイルがあることが原因である可能性があります。その場合は、承認されたソリューションをコンポーネントのmodule.tsファイルにも適用します。

Angular 5を使用しています。

私の場合、RactiveFormsModuleもインポートする必要がありました。

app.module.ts（またはanymodule.module.ts）

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

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

私はこの質問がAngular 2に関するものであることを知っていますが、私はAngular 4を使用しており、これらの回答のどれも役に立ちませんでした。

Angular 4では、構文は

[(ngModel)]

お役に立てれば。

FormsModuleを正しくインポートした後も引き続きエラーが発生する場合は、ターミナルまたは（Windowsコンソール）を確認してください。プロジェクトがコンパイルされていないため（別のエラーが原因である可能性があります）、ソリューションがブラウザーに反映されていません。

私の場合、コンソールに次の無関係なエラーがありました：プロパティ 'retrieveGithubUser'がタイプ 'ApiService'に存在しません。

モジュールでは、使用して喜んでいるngModelをインポートする必要がありFormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

ngModelはFormsModuleから送信されます。この種のエラーを受け取る場合があります。

1. ngModelが使用されているコンポーネントである、コンポーネントが宣言されているモジュールのインポート配列にFormsModuleをインポートしませんでした。
2. 別のモジュールから継承された1つのモジュールにFormsModuleをインポートしました。この場合、2つのオプションがあります。
   • 両方のモジュール（module1とmodule2）からインポート配列にFormsModuleをインポートします。原則として、モジュールをインポートしても、インポートされたモジュールへのアクセスは提供されません（インポートは継承されません）。

• module1のインポートおよびエクスポート配列にFormsModuleを宣言して、model2でも確認できるようにします。

3. （一部のバージョンではこの問題に直面しました）FormsModuleを正しくインポートしましたが、問題は入力HTMLタグにあります。入力用の名前タグ属性を追加する必要があり、[（ngModel）]のオブジェクトバインド名は、名前属性の名前と同じである必要があります

   

ではngModule、あなたインポートする必要があるFormsModuleので、ngModelから来ていますFormsModule。共有した以下のコードのようにapp.module.tsを変更してください

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

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

別のモジュールで、共有されていないモジュールのコンポーネントを使用しようとすると、このエラーが発生することがあります。

たとえば、module1.componentA.component.tsとmodule2.componentC.component.tsを持つ2つのモジュールがあり、module2内のテンプレート（たとえば<module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">）でmodule1.componentA.component.tsからのセレクターを使用しようとすると、スローされますsomeInputVariableInModule1がmodule1.componentA.component.ts内で利用できないというエラー-たとえ@Input() someInputVariableInModule1 module1.componentAに。

これが発生した場合、他のモジュールでアクセスできるようにmodule1.componentAを共有する必要があります。そのため、sharedModule内でmodule1.componentAを共有すると、module1.componentAは他のモジュール内（module1以外）で使用でき、sharedModuleをインポートするすべてのモジュールは、@Input()宣言された変数を挿入するテンプレートのセレクターにアクセスできます。

私のシナリオでは、[CommonModule]と[FormsModule]の両方をモジュールにインポートする必要がありました。

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

FormsModuleをインポートする必要があります

開いた app.module.tsをます

と行を追加

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

そして

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

同じエラーが発生したにもかかわらずBrowserModule、すでにインポートされていて、FormsModule他の関連モジュールも同じエラーが発生した場合は、それらをOrderにインポートする必要があることに気付きました。だから、順序は次のようにする必要があります 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 {}

これが誰かを助けることを願って.. :)

これは、タイプスクリプトの代わりにプレーンJavaScriptを使用するユーザー向けです。以下のようなページの上部にあるフォームスクリプトファイルを参照することに加えて

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

また、モジュールローダーにをロードするように指示する必要がありますng.forms.FormsModule。変更を加えた後imports、NgModuleメソッドの私のプロパティは以下のようになりました

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

幸せなコーディング！

RC1からRC5にアップグレードし、このエラーを受け取りました。

私は移行を完了しました（新しいapp.module.tsファイルを導入package.jsonし、新しいバージョンと不足しているモジュールを含めるように変更し、最後main.tsにAngular2クイックスタートの例に基づいてそれに応じて起動するように変更しました）。

私は、インストールされたバージョンが正しいことを確認するために、npm updateそしてその後npm outdated、まだ運がありませんでした。

node_modulesフォルダーを完全にワイプして再インストールしましたnpm install-Voila！問題が解決しました。

私が最初にチュートリアルを行ったとき、main.tsは現在のものとは少し異なって見えました。非常によく似ていますが、違いに注意してください（上のものが正しいです）。

正しい：

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

platformBrowserDynamic().bootstrapModule(AppModule);

古いチュートリアルコード：

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

app.module.tsにコードを追加します。

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

[...]

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