Angular 2 mengikat dua arah menggunakan ngModel tidak berfungsi

Tidak dapat mengikat ke 'ngModel' karena ini bukan properti know dari elemen 'input' dan tidak ada perintah yang cocok dengan properti terkait

Catatan: saya menggunakan 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 telah merilis versi finalnya pada 15 September. Tidak seperti Angular 1 Anda dapat menggunakan ngModeldirektif di Angular 2 untuk data binding dua arah, tetapi Anda perlu menulisnya dengan cara yang sedikit berbeda seperti [(ngModel)]( Pisang dalam sintaks kotak ). Hampir semua arahan inti angular2 tidak mendukungkebab-case sekarang sebagai gantinya Anda harus menggunakan camelCase.

Sekarang ngModeldirektif milik FormsModule, itu sebabnya Anda harus importyang FormsModuledari @angular/formsmodul dalam importspilihan metadata dari AppModule(NgModule). Setelah itu Anda bisa menggunakanngModel direktif di dalam halaman Anda.

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

Poin Utama:

1. ngModel di angular2 hanya valid jika FormsModule tersedia sebagai bagian dari AppModule Anda.

2. ng-model salah secara sintatis.

3. tanda kurung siku [..] mengacu pada pengikatan properti.
4. kurung kurawal (..) mengacu pada penjilidan acara.
5. ketika kawat gigi persegi dan lingkaran disatukan sebagai [(..)] mengacu pada pengikatan dua arah, biasa disebut kotak pisang.

Jadi, untuk memperbaiki kesalahan Anda.

Langkah 1: Mengimpor FormsModule

import {FormsModule} from '@angular/forms'

Langkah 2: Tambahkan untuk mengimpor array AppModule Anda sebagai

imports :[ ... , FormsModule ]

Langkah 3: Ubah ng-modelsebagai ngModel dengan kotak pisang sebagai

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

Catatan: Selain itu, Anda juga dapat menangani penyatuan data dua arah secara terpisah seperti di bawah ini

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

valueChange(value){

}

Sesuai final Angular2, Anda bahkan tidak perlu mengimpor FORM_DIRECTIVESseperti yang disarankan di atas oleh banyak orang. Namun, sintaksisnya telah diubah karena kebab-case dihilangkan untuk perbaikan.

Gantilah ng-modeldengan ngModeldan bungkus dalam sekotak pisang . Tetapi Anda telah menumpahkan kode menjadi dua file sekarang:

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

Dalam kasus saya, saya kehilangan atribut "nama" pada elemen masukan saya.

Jawaban yang membantu saya: Direktif [(ngModel)] = tidak berfungsi lagi di rc5

Singkatnya: bidang input sekarang membutuhkan properti namedalam formulir.

Di app.module.ts

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

Kemudian di impor dekorator @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Angular 2 Beta

Jawaban ini untuk mereka yang menggunakan Javascript untuk angularJS v.2.0 Beta.

Untuk menggunakan ngModeldalam tampilan Anda, Anda harus memberi tahu kompiler angular bahwa Anda menggunakan direktif yang disebut ngModel.

Bagaimana?

Untuk menggunakan ngModelada dua pustaka di angular2 Beta, dan mereka adalah ng.common.FORM_DIRECTIVESdan ng.common.NgModel.

Sebenarnya ng.common.FORM_DIRECTIVEStidak lain adalah sekelompok arahan yang berguna saat Anda membuat formulir. Ini termasuk NgModeldirektif juga.

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

});

alih-alih ng-model Anda dapat menggunakan kode ini:

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

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

di dalam app.component.ts Anda

Tambahkan kode di bawah ini ke file berikut.

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

Semoga ini membantu

impor FormsModule di AppModule Anda untuk bekerja dengan dua cara mengikat [(ngModel)] dengan Anda