Angular 2 Zwei-Wege-Bindung mit ngModel funktioniert nicht

101

Kann nicht an 'ngModel' gebunden werden, da es keine bekannte Eigenschaft des 'input'-Elements ist und es keine übereinstimmenden Anweisungen mit einer entsprechenden Eigenschaft gibt

Hinweis: Ich verwende 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);
Yajra
quelle

Antworten:

151

Angular hat seine endgültige Version am 15. September veröffentlicht. Im Gegensatz zu Angular 1 können Sie die ngModelDirektive in Angular 2 für die bidirektionale Datenbindung verwenden, müssen sie jedoch auf eine etwas andere Art und Weise schreiben [(ngModel)]( Banana in einer Box-Syntax ). Fast alle Angular2-Core-Direktiven werden kebab-casejetzt nicht unterstützt, stattdessen sollten Sie sie verwenden camelCase.

Jetzt ngModelgehört die Direktive dazu FormsModule, deshalb sollten Sie importdie Option FormsModulefrom @angular/formsmodule inside importsmetadata von AppModule(NgModule) verwenden. Danach können Sie die ngModelDirektive auf Ihrer Seite verwenden.

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

Pankaj Parkar
quelle
46

Wichtige Punkte:

  1. ngModel in angle2 ist nur gültig, wenn das FormsModule als Teil Ihres AppModule verfügbar ist.

  2. ng-model ist syntaktisch falsch.

  3. eckige Klammern [..] beziehen sich auf die Eigenschaftsbindung.
  4. Kreisklammern (..) beziehen sich auf die Ereignisbindung.
  5. Wenn quadratische und kreisförmige Klammern zusammengesetzt werden, wie [(..)] die Zwei-Wege-Bindung bezeichnet, die üblicherweise als Bananenschachtel bezeichnet wird.

Also, um Ihren Fehler zu beheben.

Schritt 1: FormsModule importieren

import {FormsModule} from '@angular/forms'

Schritt 2: Fügen Sie es dem Import-Array Ihres AppModule als hinzu

imports :[ ... , FormsModule ]

Schritt 3: Ändern Sie ng-modelals ngModel mit Bananenboxen als

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

Hinweis: Außerdem können Sie die bidirektionale Datenbindung sowohl separat als auch unten behandeln

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

valueChange(value){

}
Aravind
quelle
9

Gemäß Angular2 final müssen Sie nicht einmal importieren, FORM_DIRECTIVESwie oben von vielen vorgeschlagen. Die Syntax wurde jedoch geändert, da der Kebab-Fall zur Verbesserung weggelassen wurde.

Ersetzen Sie einfach ng-modelmit ngModelund es in wickelt eine Schachtel mit Bananen . Aber Sie haben den Code jetzt in zwei Dateien aufgeteilt:

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);
codef0rmer
quelle
8

In meinem Fall fehlte mir ein "Name" -Attribut in meinem Eingabeelement.

Konstantin Zlatkov
quelle
6

Die Antwort, die mir geholfen hat: Die Direktive [(ngModel)] = funktioniert in rc5 nicht mehr

Um es zusammenzufassen: Eingabefelder erfordern jetzt eine Eigenschaft nameim Formular.

Ophir Stern
quelle
Ja, ich hatte das gleiche Problem. Ich habe das
Namensattribut
Was zum Teufel? Warum braucht es dieses Attribut überhaupt? Dies war die unerwartetste Lösung für mich.
Nika Kasradze
4

In der app.module.ts

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

Später im Import des @ NgModule-Dekorateurs:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})
M Thomas
quelle
3

Angular 2 Beta

Diese Antwort ist für diejenigen, die Javascript für angleJS v.2.0 Beta verwenden.

Um es ngModelin Ihrer Ansicht zu verwenden, sollten Sie dem Compiler des Winkels mitteilen, dass Sie eine Direktive namens verwenden ngModel.

Wie?

Zur Verwendung ngModelgibt es in angular2 Beta zwei Bibliotheken, und sie sind ng.common.FORM_DIRECTIVESund ng.common.NgModel.

Eigentlich ng.common.FORM_DIRECTIVESist nichts als eine Gruppe von Anweisungen, die beim Erstellen eines Formulars nützlich sind. Es enthält NgModelauch die Richtlinie.

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

});
Abhilash Augustine
quelle
FYI NgModel ist in FORM_DIRECTIVES, so könnten Sie auch: Direktiven: [ng.common.FORM_DIRECTIVES]
Peter J. Hart
1
@ PeterJ.Hart, ng.common.NgModelenthält eigentlich die Verteidigung für die Richtlinie ngModel. ng.common.FORM_DIRECTIVESgruppiert einige Richtlinien einschließlich, ngModeldie nützlich sind, wenn Formulare. Wir wollen also nicht jede einzelne Anweisung für das Formular einschließen, sondern nurng.common.FORM_DIRECTIVES
Abhilash Augustine
2

Importieren Sie FormsModule in Ihr AppModule, um mit der bidirektionalen Bindung [(ngModel)] mit Ihrem zu arbeiten

Jaspis
quelle
1
Wenn möglich, bemühen Sie sich, zusätzliche Erklärungen anstelle von nur Code bereitzustellen. Solche Antworten sind in der Regel nützlicher, da sie Mitgliedern der Community und insbesondere neuen Entwicklern helfen, die Gründe für die Lösung besser zu verstehen, und dazu beitragen können, dass keine weiteren Fragen beantwortet werden müssen.
Rajan
0

Anstelle von ng-model können Sie diesen Code verwenden:

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

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

in Ihrer app.component.ts

anil
quelle
0

Fügen Sie den folgenden Code zu den folgenden Dateien hinzu.

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

Hoffe das hilft

KarunKumarReddy Mora
quelle