web-dev-qa-db-ja.com

Angular 2 ngModelを使用した双方向のバインドが機能しない

'input'要素の既知のプロパティではなく、対応するプロパティと一致するディレクティブがないため、 'ngModel'にバインドできません

注：imはalpha.31を使用しています

import { Component, View, bootstrap } from 'angular2/angular2'

@Component({
    selector: 'data-bind'
})
@View({
    template:`
        <input id="name" type="text" 
            [ng-model]="name" 
            (ng-model)="name = $event" />
        {{ name }}
    ` 
})
class DataBinding { 
    name: string;

    constructor(){
        this.name = 'Jose';
    }
}

bootstrap(DataBinding);
data-bindingtypescriptangular2-way-object-databinding
81
yajra

Angularは9月15日にその最終バージョンをリリースしました。 Angular 1とは異なり、双方向データバインディングにはAngular 2でngModelディレクティブを使用できますが、[(ngModel)]（Bananaのように少し違う方法で書く必要があります。ボックスの構文では）。ほとんどすべてのangular2コアディレクティブは現在kebab-caseをサポートしていません代わりにcamelCaseを使うべきです。

ngModelディレクティブはFormsModuleに属しているので、importのFormsModuleメタデータオプション内の@angular/formsモジュールからのimportsをAppModuleにする必要があります（NgModule）。その後、あなたはあなたのページの中でngModelディレクティブを使うことができます。

app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
    <input type="text" [(ngModel)]="myModel"/>
    {{myModel}}
  `
})
export class AppComponent { 
  myModel: any;
}

app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ], //< added FormsModule here
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

app/main.ts

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

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

デモPlunkr

124
Pankaj Parkar

キーポイント：

  1. angular2のngModelは、FormsModuleがAppModuleの一部として使用可能な場合にのみ有効です。

  2. ng-modelは構文的に間違っています。

  3. 角括弧[..]はプロパティバインディングを表します。
  4. 丸括弧（..）はイベントバインディングを表します。
  5. [（..）]が双方向バインディングを指すように、角かっこと丸かっこを組み合わせると、一般的にバナナボックスと呼ばれます。

だから、あなたのエラーを修正するために。

ステップ1：FormsModuleのインポート

import {FormsModule} from '@angular/forms'

ステップ2：AppModuleの配列を次のようにインポートします。

imports :[ ... , FormsModule ]

ステップ3：ng-modelをngModelに、バナナボックスを

 <input id="name" type="text" [(ngModel)]="name" />

注：また、以下のように双方向のデータバインディングを別々に処理できます。

<input id="name" type="text" [ngModel]="name" (ngModelChange)="valueChange($event)"/>

valueChange(value){

}
32
Aravind

Angular 2の最終版にあるように、多くの人が上で提案したようにFORM_DIRECTIVESをインポートする必要すらありません。しかし、改善のために kebab-caseが で削除されたため、構文が変更されました。

ng-modelをngModelに置き換えて、それを ボックスのバナナ で囲むだけです。しかし、コードを2つのファイルに書き出しました。

app.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'ng-app',
  template: `
    <input id="name" type="text" [(ngModel)]="name"  />
    {{ name }}
  `
})
export class DataBindingComponent {
  name: string;

  constructor() {
    this.name = 'Jose';
  }
}

app.module.ts：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DataBindingComponent } from './app'; //app.ts above

@NgModule({
  declarations: [DataBindingComponent],
  imports:      [BrowserModule, FormsModule],
  bootstrap:    [DataBindingComponent]
})
export default class MyAppModule {}

platformBrowserDynamic().bootstrapModule(MyAppModule);
8
codef0rmer

Angular 2 Beta

この回答はangularJS v.2.0 BetaにJavascriptを使っている人のためのものです。

ビューでngModelを使用するには、AngularのコンパイラにngModelというディレクティブを使用していることを伝えます。

どうですか？

ngModelを使うために、angular2 Betaには2つのライブラリがあり、それらはng.common.FORM_DIRECTIVESとng.common.NgModelです。

実際にはng.common.FORM_DIRECTIVESはフォームを作成するときに役立つディレクティブの集まりに他なりません。 NgModelディレクティブも含まれています。

app.myApp = ng.core.Component({
    selector: 'my-app',
    templateUrl: 'App/Pages/myApp.html',
    directives: [ng.common.NgModel] // specify all your directives here
}).Class({
    constructor: function () {
        this.myVar = {};
        this.myVar.text = "Testing";
    },

});
3
Abhilash Augustine

App.module.ts内

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

@NgModuleデコレータのインポートの後半にあります。

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})
2
M Thomas

私を助けた答えは： ディレクティブ[（ngModel）] = rc5ではもう動作しません

要約すると、入力フィールドはフォームにプロパティnameを必要とします。

1
Ophir Stern

ng-modelの代わりにこのコードを使うことができます：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<input #box (keyup)="0">
    <p>{{box.value}}</p>`,
})
export class AppComponent  {}

あなたのapp.component.tsの中

0
anil

以下のコードを以下のファイルに追加してください。

app.component.ts

<input type="text" [(ngModel)]="fname" >
{{fname}}
export class appcomponent {
fname:any;
}

app.module.ts

import {FormsModule} from '@angular/forms';
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ AppComponent],
bootstrap:    [ AppComponent ]
})

お役に立てれば

0
KarunKumarReddy Mora