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

javascript angular typescript 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";
}



Answer 1 Anthony Brenelière


そうですね、app.module.tsで、私はちょうど.

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

[...]

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



Answer 2 Gabriele Ciech


フォーム入力に双方向データバインディングを使用できるようにするには、 Angular モジュールに FormsModule パッケージをインポートする必要があります。詳細情報については見る Angular 2 公式チュートリアルこことの公式文書の形を




Answer 3 Alireza


使用するために [(ngModel)]角度245+、あなたはインポートする必要がありFormsModuleをアンギュラ形から...

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

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

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

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

したがって、単にapp.module.tsを探し、FormsModuleFormsModule されていることを確認します...

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

また、これはAngular4のコメント始動電流である ngModelFormsModuleは

/**
 * `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を参照してください




Answer 4 PRao


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

app.module.tsを開きます

と行を追加します。

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

and

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



Answer 5 KhoPhi


これを投げることで誰かの助けになるかもしれません。

新しいNgModuleを作成したと仮定すると、言う AuthModule は必ず輸入に作る、あなたの認証のニーズを処理専用 FormsModule そのAuthModuleであまりにも

あなたが使うことになる場合 FormsModule を ONLYに 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 をどこにも。