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

Ответ 1

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

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

приложение /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);

Demo Plunkr

Ответ 2

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

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

• ng-model является синтаксически неправильным.

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

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

Шаг 1: Импорт формModule

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

}

Ответ 3

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

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

app.ts:

  import {Component} из '@angular/core';

@Компонент({ селектор: 'ng-app', шаблон: `   < input id =  "name"  type = "text" [(ngModel)] =  "name" />   {{ имя }} `
})
класс экспорта DataBindingComponent { name: string;
 конструктор() {   this.name = 'Jose'; }
}
Код>

app.module.ts:

  import {NgModule} из '@angular/core';
import {FormsModule} из '@angular/forms';
import {BrowserModule} из '@angular/platform-browser';
import {platformBrowserDynamic} из '@angular/platform-browser-dynamic';
import {DataBindingComponent} из './app';//app.ts выше

@NgModule ({ объявления: [DataBindingComponent], import: [BrowserModule, FormsModule], bootstrap: [DataBindingComponent]
})
экспорт класса по умолчанию MyAppModule {}

. PlatformBrowserDynamic() bootstrapModule (MyAppModule);
Код>

Ответ 4

Angular 2 Бета

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

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

Как?

Для использования ngModel в бета-версии angular2 есть две библиотеки, а они 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";
    },

});

Ответ 5

В app.module.ts

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

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

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Ответ 6

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

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

Ответ 7

вместо 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