Двухсторонняя привязка Angular 2 с использованием ngModel не работает


101

Невозможно выполнить привязку к ngModel, поскольку это не известное свойство элемента input, и нет соответствующих директив с соответствующим свойством

Примечание: я использую 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);

Ответы:


153

Angular выпустил свою финальную версию 15 сентября. В отличие от Angular 1, вы можете использовать ngModelдирективу в Angular 2 для двусторонней привязки данных, но вам нужно написать ее немного по-другому, например [(ngModel)]( синтаксис банана в поле ). Почти все директивы ядра angular2 сейчас не поддерживаются, kebab-caseвместо этого вы должны использовать camelCase.

Теперь ngModelдиректива принадлежит FormsModule, поэтому вы должны importиспользовать параметр FormsModulefrom @angular/formsmodule inside importsmetadata для AppModule(NgModule). После этого вы можете использовать ngModelдирективу внутри на своей странице.

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.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 { }

приложение / main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Демо Plunkr


46

Ключевые моменты:

  1. ngModel в angular2 действителен, только если FormsModule доступен как часть вашего AppModule.

  2. ng-model синтаксически неверно.

  3. квадратные скобки [..] относятся к привязке свойств.
  4. круглые скобки (..) относятся к привязке события.
  5. когда квадратные и круглые скобки соединены вместе, поскольку [(..)] обозначает двустороннюю привязку, обычно называемую банановой коробкой.

Итак, чтобы исправить вашу ошибку.

Шаг 1. Импорт FormsModule

import {FormsModule} from '@angular/forms'

Шаг 2. Добавьте его в массив импорта вашего AppModule как

imports :[ ... , FormsModule ]

Шаг 3. Измените ng-modelкак ngModel с банановыми коробками как

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

Примечание. Кроме того, вы можете обрабатывать двустороннюю привязку данных отдельно, как показано ниже.

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

valueChange(value){

}

9

Согласно Angular2 final вам даже не нужно импортировать, FORM_DIRECTIVESкак было предложено многими выше. Однако синтаксис был изменен, поскольку kebab-case был удален для улучшения.

Просто замените ng-modelна ngModelи заверните в коробку с бананами . Но теперь вы разбили код на два файла:

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


6

Ответ, который мне помог: директива [(ngModel)] = больше не работает в rc5

Подводя итог: поля ввода теперь требуют свойства nameв форме.


Да, у меня была такая же проблема. Я ввел атрибут name во ввод и работал
vrbsm

что за черт? зачем ему вообще этот атрибут? это было для меня самым неожиданным решением.
Ника Касрадзе

4

В app.module.ts

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

Позже в импорте декоратора @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

3

Angular 2 бета

Этот ответ для тех, кто использует Javascript для angularJS v.2.0 Beta.

Для использования ngModelв вашем представлении вы должны сообщить компилятору angular, что вы используете директиву с именем ngModel.

Как?

Для использования ngModelв angular2 Beta есть две библиотеки: ng.common.FORM_DIRECTIVESи ng.common.NgModel.

На самом деле ng.common.FORM_DIRECTIVESэто не что иное, как группа директив, которые полезны при создании формы. Он также включает 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";
    },

});

К вашему сведению, NgModel находится в FORM_DIRECTIVES, так что вы также можете: директивы: [ng.common.FORM_DIRECTIVES]
Питер Дж. Харт

1
@ PeterJ.Hart, на самом деле ng.common.NgModelсодержит определение директивы ngModel. ng.common.FORM_DIRECTIVESгруппирует некоторые директивы, включая ngModelполезные формы. Поэтому мы не хотим включать все директивы для формы, просто ng.common.FORM_DIRECTIVES
включите

0

вместо ng-model вы можете использовать этот код:

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

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

внутри вашего app.component.ts


0

Добавьте приведенный ниже код в следующие файлы.

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

Надеюсь это поможет


0

импортируйте FormsModule в свой AppModule для работы с двусторонней привязкой [(ngModel)] с вашим


1
По возможности постарайтесь предоставить дополнительные объяснения, а не просто код. Такие ответы, как правило, более полезны, поскольку они помогают членам сообщества, особенно новым разработчикам, лучше понять обоснование решения и могут помочь предотвратить необходимость в ответах на дополнительные вопросы.
Раджан
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.