A vinculação bidirecional Angular 2 usando ngModel não está funcionando

Não é possível vincular a 'ngModel' porque não é uma propriedade conhecida do elemento 'input' e não há diretivas correspondentes com uma propriedade correspondente

Nota: estou usando 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);

O Angular lançou sua versão final em 15 de setembro. Ao contrário do Angular 1, você pode usar a ngModeldiretiva no Angular 2 para vinculação de dados bidirecional, mas é necessário escrevê-la de uma maneira um pouco diferente, como [(ngModel)]( sintaxe de banana em uma caixa ). Quase todas as diretivas do núcleo angular2 não suportam kebab-caseagora, em vez disso, você deve usar camelCase.

Agora a ngModeldiretiva pertence a FormsModule, é por isso que você deve importa opção FormsModulefrom @angular/formsmodule inside importsmetadata de AppModule(NgModule). Depois disso, você pode usar a ngModeldiretiva dentro de sua página.

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

Demo Plunkr

Pontos chave:

1. ngModel no angular2 é válido apenas se o FormsModule estiver disponível como parte do seu AppModule.

2. ng-model está sintaticamente errado.

3. colchetes [..] refere-se à vinculação de propriedade.
4. colchetes (..) referem-se à associação de evento.
5. quando os colchetes são colocados juntos, como [(..)] refere-se à ligação bidirecional, comumente chamada de caixa de banana.

Então, para consertar seu erro.

Etapa 1: Importando FormsModule

import {FormsModule} from '@angular/forms'

Etapa 2: adicione-o ao array de importações de seu AppModule como

imports :[ ... , FormsModule ]

Etapa 3: mude ng-modelcomo ngModel com caixas de banana como

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

Nota: Além disso, você pode lidar com a ligação de dados bidirecional separadamente, assim como abaixo

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

valueChange(value){

}

De acordo com o final do Angular2, você não precisa nem mesmo importar FORM_DIRECTIVEScomo sugerido acima por muitos. No entanto, a sintaxe foi alterada à medida que o caso do kebab foi descartado para melhoramento.

Basta substituir ng-modelpor ngModele embrulhar em uma caixa de bananas . Mas você dividiu o código em dois arquivos agora:

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

No meu caso, estava faltando um atributo "nome" no meu elemento de entrada.

A resposta que me ajudou: A diretiva [(ngModel)] = não funciona mais no rc5

Para resumir: os campos de entrada agora exigem propriedade nameno formulário.

No app.module.ts

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

Posteriormente, na importação do decorador @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Angular 2 Beta

Esta resposta é para aqueles que usam Javascript para angularJS v.2.0 Beta.

Para usar ngModelem sua visão, você deve informar ao compilador do angular que está usando uma diretiva chamada ngModel.

Quão?

Para usar, ngModelexistem duas bibliotecas no angular2 Beta, e são ng.common.FORM_DIRECTIVESe ng.common.NgModel.

Na verdade, ng.common.FORM_DIRECTIVESnada mais é do que um grupo de diretivas que são úteis quando você está criando um formulário. Inclui NgModeldiretiva também.

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

});

em vez de ng-model, você pode usar este código:

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

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

dentro de seu app.component.ts

Adicione o código abaixo aos seguintes arquivos.

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

Espero que isto ajude

importar FormsModule em seu AppModule para trabalhar com ligação bidirecional [(ngModel)] com seu