ngModel을 사용하는 Angular 2 양방향 바인딩이 작동하지 않습니다.

'input'요소의 알려진 속성이 아니고 해당 속성과 일치하는 지시문이 없으므로 'ngModel'에 바인딩 할 수 없습니다.

참고 : im using 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);

Angular는 9 월 15 일에 최종 버전을 출시했습니다. Angular 1과 달리 Angular ngModel2에서 양방향 데이터 바인딩을 위해 지시문을 사용할 수 있지만 [(ngModel)]( Banana in a box syntax ) 와 같이 약간 다른 방식으로 작성해야 합니다 . 거의 모든 angular2 코어 지시문은 kebab-case이제 지원하지 않습니다 camelCase. 대신 .

이제 ngModel지시어에 속한 FormsModule사용자들은, 왜해야 에서 내부 모듈 의 메타 데이터 옵션 (NgModule). 그 후 페이지에서 지시문 을 사용할 수 있습니다 .importFormsModule@angular/formsimportsAppModulengModel

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

키 포인트:

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

}

Angular2 final에 따라 FORM_DIRECTIVES위에서 제안한 것처럼 많은 사람들이 가져올 필요가 없습니다 . 그러나 개선을 위해 kebab-case가 삭제됨 에 따라 구문이 변경되었습니다 .

그냥 교체 ng-model와 함께 ngModel하고 그것을 포장 바나나의 상자 . 그러나 이제 코드를 두 개의 파일로 넘겼습니다.

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);

제 경우에는 입력 요소에 "이름"속성이 없습니다.

나를 도운 대답 : 지시어 [(ngModel)] = rc5에서 더 이상 작동하지 않음

요약하자면 입력 필드에는 이제 name양식의 속성 이 필요합니다 .

app.module.ts에서

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

나중에 @NgModule 데코레이터의 가져 오기에서 :

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Angular 2 베타

이 답변은 angularJS v.2.0 Beta에 Javascript 를 사용하는 사람들을 위한 것입니다.

ngModel뷰에서 사용하려면 angular의 컴파일러에게라는 지시문을 사용하고 있음을 알려야합니다 ngModel.

어떻게?

사용하려면 ngModel이 두 라이브러리는 angular2 베타 버전이며, 그들은있다 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";
    },

});

AppModule에서 FormsModule을 가져 와서 양방향 바인딩 [(ngModel)]을

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 내부

다음 파일에 아래 코드를 추가하십시오.

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 ]
})

도움이 되었기를 바랍니다