web-dev-qa-db-ja.com

'ngModel'は 'input'の検証のプロパティではないためにできません

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

私のアプリが動作するように私はコメントアウトする必要があります。

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";
}
javascriptangulartypescriptinput
963
Anthony Brenelière

はい、それで、app.module.tsに、私はちょうど加えました：

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
1404
Anthony Brenelière

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

460
Gabriele Ciech

Angular 2、4＆5+、）でFormsModuleからAngularの形式で[(ngModel)]を使用するには.. 。

また、これはgithub：）のAngularリポジトリ内のフォームの下にあります。

angle/packages/forms/src/directives/ng_model.ts

おそらくこれはAngularJs開発者に対して以前はいつでもng-modelを使用できましたが、Angularはモジュールを分割して好きなものを使用しようとしているため）その時に使いたいのですが、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 { }

これは、Angular 4 ngModel in 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!
 */

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

[ngModelOptions]="{standalone: true}"

詳しくは、Angularセクションのng_model） こちら をご覧ください。

191
Alireza

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

開く app.module.ts

行を追加

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

そして

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

これを投げると誰かに役立つかもしれません。

あなたが新しいNgModuleを作成したと仮定して、あなたのAuthニーズを扱うことに捧げられたAuthModuleは、そのAuthModule too の中にFormsModuleをインポートすることを忘れないでください。

FormsModuleでのみAuthModuleを使用するのであれば、デフォルトのFormModuleに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へのインポートを忘れてください。

46
Rexford

このエラーを取り除くためにあなたが従う必要がある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 { }

それが役に立てば幸い

34
debugmode

import 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 { }
21
Shashikant Pandit

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

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>
19
iGhost

私はAngular 5を使っています。

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

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

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

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

単純なSoultion： app.module.ts

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

imports: [
 BrowserModule,
 FormsModule
 ],

例2 ：

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

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

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

私はAngular 7を使っています

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

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

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

formsModuleを正しくインポートしてもまだエラーが発生する場合は、プロジェクトがコンパイルされていないため（またはその他のエラーが原因で）、解決策がブラウザに反映されていないため、端末または（Windowsコンソール）をチェックインします。

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

12
mruanova

承認された解決策を適用してもエラーが発生する場合は、おそらく、inputタグでngModelプロパティを使用するコンポーネント用に別のモジュールファイルがあることが原因です。その場合は、コンポーネントのmodule.tsファイルにも受け入れられている解決策を適用してください。

12
Subham Pasari

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

Angular 4では、構文は次のようになります。

[(ngModel)]

お役に立てれば。

12
Matt

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 { }
9
Vicky Khichar

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

App.module.tsを開いてください

Import FormsModule from @ angle/forms

例：

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

そして

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

ngModel はFormsModuleから来ています。このようなエラーを受け取ることがある場合があります。

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

enter image description here

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

enter image description here

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

    enter image description here

8
Rzv Razvan

このモジュールでは、 ngModel を使用します - /インポートする必要があります FormsModule 

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }
8
Malindu Sandaruwan
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 {}
7
William Pourmajidi

私のシナリオでは、[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 { }
6
Mina Matta

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

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

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

5
Guntram

これはType Scriptの代わりに普通のJavaScriptを使う人のためのものです。以下のようにページ上部のフォームスクリプトファイルを参照することに加えて

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

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

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

ハッピーコーディング！

5
James Poulose

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

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

インストールされたバージョンが正しいことを確認するためにnpm updateを実行し、次にnpm outdatedを実行しました。

私はnode_modulesフォルダを完全に消去し、npm installで再インストールしました - Voila！問題が解決しました。

4
Rots

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

開く app.module.ts

行を追加

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

そして

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

私が最初にチュートリアルをしたとき、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);
4
Jordan Lapp

Angular 2のどのバージョンでも、app.module.tsファイルにFormsModuleをインポートする必要があります。これで問題は解決します。

0
Siddhartha Thota

最近、モジュールでFormsModuleのインポートを忘れた場合だけでなく、間違いが起こることがわかりました。私の場合、問題はこのコードにありました

<input type="text" class="form-control" id="firstName"
                   formControlName="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

変更して修正formControlName-> name

<input type="text" class="form-control" id="firstName"
                   name="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

この答えが同じ問題を抱えている人の時間を節約することを願っています。

0
Nikita Sychou