Angular 2 mengikat dua arah menggunakan ngModel tidak berfungsi

101

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

Jawaban:

151

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

Pankaj Parkar
sumber
46

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

}
Aravind
sumber
9

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

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

Konstantin Zlatkov
sumber
6

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

Singkatnya: bidang input sekarang membutuhkan properti namedalam formulir.

Ophir Stern
sumber
Ya, saya punya masalah yang sama. Saya menempatkan atribut nama di masukan dan bekerja
vrbsm
sebenarnya apa sih? mengapa bahkan membutuhkan atribut itu? ini adalah solusi yang paling tidak terduga bagi saya.
Nika Kasradze
4

Di app.module.ts

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

Kemudian di impor dekorator @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})
M Thomas
sumber
3

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

});
Abhilash Augustine
sumber
FYI NgModel ada dalam FORM_DIRECTIVES, jadi Anda juga bisa: direktif: [ng.common.FORM_DIRECTIVES]
Peter J. Hart
1
@ PeterJ.Hart, Sebenarnya ng.common.NgModelberisi definisi untuk direktif ngModel. ng.common.FORM_DIRECTIVESadalah mengelompokkan beberapa direktif termasuk ngModelyang berguna if forms. Jadi kami tidak ingin memasukkan setiap arahan untuk formulir hanya menyertakanng.common.FORM_DIRECTIVES
Abhilash Augustine
0

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

anil
sumber
0

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

KarunKumarReddy Mora
sumber
0

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


sumber
1
Jika memungkinkan, berikan penjelasan tambahan, bukan hanya kode. Jawaban semacam itu cenderung lebih berguna karena membantu anggota komunitas dan terutama pengembang baru lebih memahami alasan solusi, dan dapat membantu mencegah kebutuhan untuk menjawab pertanyaan lanjutan.
Rajan