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


101

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

Réponses:


151

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


46

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

}

9

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



4

Dans l'app.module.ts

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

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

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

3

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

});

FYI NgModel est dans FORM_DIRECTIVES, vous pouvez donc aussi: directives: [ng.common.FORM_DIRECTIVES]
Peter J. Hart

1
@ PeterJ.Hart, ng.common.NgModelcontient en fait la définition de la directive ngModel. ng.common.FORM_DIRECTIVESregroupe certaines directives, y compris ngModelqui sont utiles si les formulaires. Nous ne voulons donc pas inclure chacun et chaque directive de la forme il suffit d' inclureng.common.FORM_DIRECTIVES
Abhilash Augustine

0

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


0

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

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


1
Lorsque cela est possible, veuillez faire un effort pour fournir des explications supplémentaires au lieu de simplement du code. De telles réponses ont tendance à être plus utiles car elles aident les membres de la communauté et en particulier les nouveaux développeurs à mieux comprendre le raisonnement de la solution, et peuvent aider à éviter d'avoir à répondre à des questions de suivi.
Rajan
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.