web-dev-qa-db-fra.com

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

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

Note: im utilisant 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);
data-bindingtypescriptangular2-way-object-databinding
83
yajra

Angular a publié sa version finale le 15 septembre. Contrairement à Angular 1, vous pouvez utiliser la directive ngModel dans Angular 2 pour la liaison de données bidirectionnelle, mais vous devez l'écrire de manière légèrement différente, comme [(ngModel)] ( Banane dans une syntaxe de boîte ). Presque toutes les directives de base angular2 ne supportent pas kebab-case, vous devez maintenant utiliser camelCase.

Maintenant, la directive ngModel appartient à FormsModule, c'est pourquoi vous devriez import la FormsModule du module @angular/forms à l'intérieur de imports option de métadonnées de AppModule (NgModule). Vous pouvez ensuite utiliser la directive ngModel à 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

131
Pankaj Parkar

Points clés:

  1. ngModel dans angular2 est valide uniquement si FormsModule est disponible dans le cadre de votre AppModule.

  2. ng-model est faux sur le plan de la synchronisation.

  3. les accolades carrées [..] se réfèrent à la propriété binding.
  4. les accolades de cercle (..) se rapportent à la liaison d'événement.
  5. lorsque des accolades ronds et carrés sont assemblés, [[..]] désigne une liaison bidirectionnelle, communément appelée boîte banane.

Donc, pour corriger votre erreur.

Étape 1: Importer FormsModule

import {FormsModule} from '@angular/forms'

Étape 2: Ajoutez-le au tableau imports de votre AppModule en tant que

imports :[ ... , FormsModule ]

Étape 3: Changer ng-model comme ngModel avec les boîtes bananes comme

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

Remarque: De plus, vous pouvez gérer la liaison de données bidirectionnelle séparément ainsi que ci-dessous

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

valueChange(value){

}
33
Aravind

Comme dans Angular2 final, vous n'avez même pas besoin d'importer FORM_DIRECTIVES comme suggéré ci-dessus par beaucoup. Cependant, la syntaxe a été modifiée de la manière suivante: kebab-case a été abandonné pour l'amélioration.

Il suffit de remplacer ng-model par ngModel et de l'envelopper dans ne boîte de bananes . Mais vous avez maintenant versé 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);
8
codef0rmer

Dans le app.module.ts

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

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

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})
4
M Thomas

angulaire 2 bêta

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

Pour utiliser ngModel dans votre vue, vous devez indiquer au compilateur de l’angle que vous utilisez une directive appelée ngModel.

comment?

Pour utiliser ngModel, il existe deux bibliothèques dans angular2 Beta, qui sont ng.common.FORM_DIRECTIVES et ng.common.NgModel.

En réalité, ng.common.FORM_DIRECTIVES n'est qu'un groupe de directives qui sont utiles lors de la création d'un formulaire. Elle inclut également la directive 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";
    },

});
3
Abhilash Augustine

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

1
anil

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

En résumé: les champs de saisie nécessitent maintenant la propriété name du formulaire.

1
Ophir Stern

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

0
KarunKumarReddy Mora