La liaison bidirectionnelle angulaire 2 à l'aide de ngModel ne fonctionne pas

Impossible de se lier à 'ngModel' car ce n'est pas une propriété know de l'élément 'input' et il n'y a pas de directives correspondantes avec une propriété correspondante

Remarque: j'utilise 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 a publié sa version finale le 15 septembre. Contrairement à Angular 1, vous pouvez utiliser la ngModeldirective dans Angular 2 pour la liaison de données bidirectionnelle, mais vous devez l'écrire d'une manière un peu différente comme [(ngModel)]( Banana in a box syntax ). Presque toutes les directives de base angular2 ne prennent pas en charge kebab-casemaintenant à la place que vous devriez utiliser camelCase.

Maintenant ngModeldirective appartient FormsModule, qui est la raison pour laquelle vous devriez importle FormsModulede @angular/formsmodule à l' intérieur l' importsoption métadonnées AppModule(NgModule). Par la suite, vous pouvez utiliser la ngModeldirective à l'intérieur de votre page.

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

Démo Plunkr

Points clés:

1. ngModel dans angular2 n'est valide que si FormsModule est disponible dans le cadre de votre AppModule.

2. ng-model est syntatiquement faux.

3. les accolades [..] font référence à la liaison de propriété.
4. les accolades (..) font référence à la liaison d'événement.
5. lorsque les accolades carrées et circulaires sont assemblées comme [(..)] se réfère à une reliure bidirectionnelle, communément appelée boîte banane.

Donc, pour corriger votre erreur.

Étape 1: importation de FormsModule

import {FormsModule} from '@angular/forms'

Étape 2: ajoutez-le au tableau des importations de votre AppModule en tant que

imports :[ ... , FormsModule ]

Étape 3: Changer ng-modelcomme ngModel avec des boîtes de banane comme

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

Remarque: vous pouvez également gérer la liaison de données bidirectionnelle séparément et ci-dessous

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

valueChange(value){

}

Selon Angular2 final, vous n'avez même pas besoin d'importer FORM_DIRECTIVEScomme suggéré ci-dessus par beaucoup. Cependant, la syntaxe a été modifiée car kebab-case a été abandonné pour l'amélioration.

Il suffit de remplacer ng-modelavec ngModelet l' envelopper dans une boîte de bananes . Mais vous avez maintenant renversé le code dans deux fichiers:

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

Dans mon cas, il me manquait un attribut "nom" sur mon élément d'entrée.

La réponse qui m'a aidé: La directive [(ngModel)] = ne fonctionne plus dans rc5

Pour résumer: les champs de saisie nécessitent désormais une propriété namedans le formulaire.

Dans l'app.module.ts

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

Plus tard dans l'importation du décorateur @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Angular 2 Bêta

Cette réponse est pour ceux qui utilisent Javascript pour angularJS v.2.0 Beta.

Pour l'utiliser ngModeldans votre vue, vous devez indiquer au compilateur angular que vous utilisez une directive appelée ngModel.

Comment?

Pour l'utiliser, ngModelil existe deux bibliothèques dans angular2 Beta, et elles sont ng.common.FORM_DIRECTIVESet ng.common.NgModel.

En fait, ce ng.common.FORM_DIRECTIVESn'est rien d'autre qu'un groupe de directives utiles lorsque vous créez un formulaire. Il comprend NgModelégalement une directive.

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

});

au lieu de ng-model, vous pouvez utiliser ce code:

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

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

dans votre app.component.ts

Ajoutez le code ci-dessous aux fichiers suivants.

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

J'espère que cela t'aides

importez FormsModule dans votre AppModule pour travailler avec une liaison bidirectionnelle [(ngModel)] avec votre