data binding - property - La unión bidireccional angular 2 con ngModel no funciona

ngmodel angular 5

Question

No se puede vincular a ''ngModel'' ya que 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);

Answer 1

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

Answer 2

Angular ha lanzado su versión final el 15 de septiembre. A diferencia de Angular 1, puede usar la directiva ngModel en Angular 2 para el enlace de datos bidireccional, pero debe escribirlo de una manera un poco diferente, como [(ngModel)] ( sintaxis Banana in a box ). Casi todas las directivas de angular2 core no admiten kebab-case ahora, en su lugar, debe usar camelCase .

Ahora la directiva ngModel pertenece a FormsModule , por eso debe import el FormsModule desde el FormsModule @angular/forms dentro de la opción de metadatos de imports de AppModule (NgModule). A partir de entonces, puede usar la directiva ngModel 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

Answer 3

De acuerdo con Angular2 final, ni siquiera tiene que importar FORM_DIRECTIVES como lo sugieren muchos anteriormente. Sin embargo, la sintaxis ha cambiado a medida que el caso kebab se eliminó para mejorar.

Simplemente reemplace ng-model con ngModel y envuélvalo en una caja de plátanos . Pero ahora ha derramado 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);

Answer 4

En la app.module.ts

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

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

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Answer 5

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

Para resumir: los campos de entrada ahora requieren el name de la propiedad en el formulario.

Answer 6

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 tu app.component.ts

Answer 7

Angular 2 Beta

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

Para usar ngModel en su vista, debe decirle al compilador del angular que está usando una directiva llamada ngModel .

¿Cómo?

Para usar ngModel hay dos bibliotecas en angular2 Beta, y son ng.common.FORM_DIRECTIVES y ng.common.NgModel .

En realidad, ng.common.FORM_DIRECTIVES no es más que un grupo de directivas que son útiles al crear un formulario. Incluye la directiva NgModel 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";
    },

});

Answer 8

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. los corchetes [..] se refieren al enlace de propiedad.
4. los corchetes (..) se refieren al enlace del evento.
5. cuando las llaves cuadradas y circulares se juntan como [(..)] se refiere a la unión bidireccional, comúnmente llamada caja de plátano.

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: Cambie ng-model como 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){

}