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

ne peut pas se lier à ' ngModel 'puisqu'il ne s'agit pas d'une propriété connue de l'élément' input 'et qu'il n'y a pas de directives correspondantes avec une propriété correspondante

Remarque: im à l'aide de l'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);
67
demandé sur Günter Zöchbauer 2015-07-25 10:01:49

7 réponses

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

maintenant ngModel la directive appartient à FormsModule , c'est pourquoi vous devriez import l'option FormsModule de @angular/forms module à l'intérieur de imports metadata de AppModule (NgModule). Ensuite, vous pouvez utiliser la directive ngModel à l'intérieur de votre page.

app/app.composant.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

111
répondu Pankaj Parkar 2017-01-13 06:54:29

Points Clés:

  1. ngModel dans angular2 est valable que si le FormsModule est disponible en tant que partie de votre AppModule.

  2. ng-model est syntatiquement erroné.

  3. bracelets carrés [..] fait référence à la propriété de liaison.
  4. cercle des accolades (..) fait référence à l'événement de liaison.
  5. quand les accolades carrées et circulaires sont regroupées sous la forme [(..)] désigne une liaison bidirectionnelle, communément appelé boîte de banania.

Donc, pour corriger votre erreur.

Étape 1: Importation FormsModule 

import {FormsModule} from '@angular/forms'

Étape 2: Ajouter aux importations tableau de votre AppModule 

imports :[ ... , FormsModule ]

Etape 3: modifier ng-model en tant que modèle avec banane cases as 

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

Note: aussi, 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){

}
24
répondu Aravind 2017-03-04 20:14:26

selon Angular2 final, vous n'avez même pas à importer FORM_DIRECTIVES comme suggéré ci-dessus par beaucoup. Cependant, la syntaxe a été changée comme kebab-case a été abandonné pour l'amélioration.

il suffit de remplacer ng-model par ngModel et de l'envelopper dans une boîte de bananes . Mais vous avez maintenant transformé le code en 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
répondu codef0rmer 2016-10-05 12:51:14

Angular 2 Beta

cette réponse est pour ceux qui utilisent Javascript pour angularJS v. 2.0 bêta.

pour utiliser ngModel à votre avis, vous devriez dire au compilateur d'angular que vous utilisez une directive appelée ngModel .

comment?

pour utiliser ngModel il y a deux bibliothèques dans angular2 Beta, et ils sont ng.common.FORM_DIRECTIVES et ng.common.NgModel .

en fait ng.common.FORM_DIRECTIVES n'est rien d'autre qu'un groupe de directives qui sont utiles lorsque vous créez 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
répondu Abhilash P A- Pullelil 2016-01-19 04:06:13

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

pour résumer: les champs d'entrée nécessitent maintenant la propriété name dans le formulaire.

1
répondu Ophir Stern 2017-05-23 12:34:19

Dans l'app.module.ts 

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

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

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})
1
répondu M Thomas 2017-04-10 15:57:51

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 application.composant.ts

0
répondu anil 2017-02-22 05:43:11