Angular 2 使用 ngModel 的双向绑定不起作用

Question

无法绑定到 'ngModel'，因为它不是 'input' 元素的已知属性，并且没有具有相应属性[ 的匹配指令=12=]

注意：我使用的是 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);

Answer 1

Angular 已于 9 月 15 日发布了最终版本。与 Angular 1 不同，您可以在 Angular 2 中使用 ngModel 指令进行双向数据绑定，但您需要以稍微不同的方式编写它，例如 [(ngModel)] (香蕉盒语法)。几乎所有的 angular2 核心指令现在都不支持 kebab-case 而应该使用 camelCase.

Now ngModel directive belongs to FormsModule, that's why you should import the FormsModule from @angular/forms module inside imports metadata option of AppModule(NgModule). Thereafter you can use ngModel directive inside on your page.

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

Answer 2

Angular 2 测试版

这个答案是为那些使用 Javascript for 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";
    },

});

Answer 3

根据 Angular2 final，您甚至不必像上面许多人建议的那样导入 FORM_DIRECTIVES。但是，为了改进，语法已更改为 kebab-case was dropped。

只需将ng-model替换为ngModel并将其包裹在a box of bananas中。但是您现在已将代码溢出到两个文件中：

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

Answer 4

对我有帮助的答案： The directive [(ngModel)]= not working anymore in rc5

总结一下：输入字段现在需要在表单中属性 name。

Answer 5

您可以使用此代码代替 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

里面

Answer 6

要点：

angular2 中的 ngModel 仅当 FormsModule 作为 AppModule 的一部分可用时才有效。
ng-model 语法错误。
方括号[..]指的是属性绑定。
圆括号 (..) 指的是事件绑定。
当方括号和圆括号放在一起作为[(..)]时指的是双向绑定，俗称香蕉盒。

所以，修正你的错误。

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

}

Answer 7

在app.module.ts

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

稍后在@NgModule 装饰器的导入中：

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Answer 8

将以下代码添加到以下文件中。

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

希望对您有所帮助

Answer 9

就我而言，我的输入元素上缺少 "name" 属性。

Answer 10

在您的 AppModule 中导入 FormsModule 以使用双向绑定 [(ngModel)] 与您的

Answer 11

对于 Angular 的较新版本：

-写成[(ngModel)] = yourSearch
在.ts文件
中声明一个名为yourSearch的空变量(属性)
在 app.module.ts 文件中添加 FormsModule 来自 - @angular/forms;
如果您的应用程序是运行，则在您对其 module.ts 文件
进行更改后重新启动它

Answer 12

注意：为了让 ngModel 独立存在于反应形式中，我们必须使用 ngModelOptions 如下：

 [ngModelOptions]="{ standalone: true }"

例如：

 <mat-form-field appearance="outline" class="w-100">
            <input
              matInput 
              [(ngModel)]="accountType"
              [ngModelOptions]="{ standalone: true }"
            />
 </mat-form-field>

Answer 13

这些东西丢失/错误：

Import FormsModule in imports array of module (ngModel requires FormsModule)
ngModel写成：[(ngModel)]="modelName"

这样，就可以了！

Answer 14

如果你使用的是懒加载模块，你需要在当前模块中导入ngModule和formModule。示例：

//shared.module.ts
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'

imports: [
    FormsModule,]

Angular 2 使用 ngModel 的双向绑定不起作用

Angular 2 two way binding using ngModel is not working

data-binding

2-way-object-databinding

typescript

angular