El enlace bidireccional angular 2 con ngModel no funciona

No se puede enlazar a 'ngModel' porque no es una propiedad conocida del elemento 'input' y no hay directivas coincidentes con una propiedad correspondiente

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

Angular ha lanzado su versión final el 15 de septiembre. A diferencia de Angular 1, puede usar la ngModeldirectiva en Angular 2 para el enlace de datos bidireccional, pero debe escribirla de una manera un poco diferente, como [(ngModel)]( sintaxis Banana in a box ). Casi todas las directivas de núcleo angular2 no son compatibles kebab-caseahora, en su lugar, debería usar camelCase.

Ahora la ngModeldirectiva pertenece a FormsModule, es por eso que debe usar importel módulo FormsModulefrom @angular/formsdentro de la importsopción de metadatos de AppModule(NgModule). A partir de entonces, puede usar la ngModeldirectiva dentro de su 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

Puntos clave:

1. ngModel en angular2 es válido solo si FormsModule está disponible como parte de su AppModule.

2. ng-model es sintácticamente incorrecto.

3. llaves cuadradas [..] se refiere a la propiedad vinculante.
4. llaves de círculo (..) se refiere a la vinculación de eventos.
5. cuando las llaves cuadradas y circulares se juntan como [(..)] se refiere a encuadernación bidireccional, comúnmente llamada caja banana.

Entonces, para corregir su error.

Paso 1: Importar FormsModule

import {FormsModule} from '@angular/forms'

Paso 2: agréguelo a la matriz de importaciones de su AppModule como

imports :[ ... , FormsModule ]

Paso 3: Cambiar ng-modelcomo ngModel con cajas de banana como

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

Nota: Además, puede manejar el enlace de datos bidireccional por separado, así como a continuación

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

valueChange(value){

}

Según Angular2 final, ni siquiera tiene que importar FORM_DIRECTIVEScomo muchos sugirieron anteriormente. Sin embargo, la sintaxis se ha cambiado ya que se eliminó el caso de kebab para mejorar.

Basta con sustituir ng-modelcon ngModely se envuelve en una caja de plátanos . Pero ahora ha dividido el código en dos archivos:

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

En mi caso, me faltaba un atributo de "nombre" en mi elemento de entrada.

La respuesta que me ayudó: la directiva [(ngModel)] = ya no funciona en rc5

En resumen: los campos de entrada ahora requieren propiedad nameen el formulario.

En app.module.ts

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

Más adelante en la importación del decorador @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Angular 2 Beta

Esta respuesta es para aquellos que usan Javascript para angularJS v.2.0 Beta.

Para usarlo ngModelen su vista, debe decirle al compilador de angular que está usando una directiva llamada ngModel.

¿Cómo?

Para usar, ngModelhay dos bibliotecas en angular2 Beta, y son ng.common.FORM_DIRECTIVESy ng.common.NgModel.

En realidad, ng.common.FORM_DIRECTIVESno es más que un grupo de directivas que son útiles cuando está creando un formulario. Incluye NgModeldirectiva también.

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

});

importar FormsModule en su AppModule para trabajar con enlace bidireccional [(ngModel)] con su

en lugar de ng-model puedes 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 su app.component.ts

Agregue el siguiente código a los siguientes archivos.

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 esto ayude