Angular 2 two way binding using ngModel is not working

Can't bind to 'ngModel' since it isn't a know property of the 'input' element and there are no matching directives with a corresponding property

Note: im using 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);
400220 次浏览
小开
最佳答案

Angular 已经发布了9月15日的最终版本。与角度1不同，你可以使用角度2中的 ngModel指令进行双向数据绑定，但是你需要像 [(ngModel)](Banana in a box syntax)一样用不同的方式来写。现在几乎所有的 angular2核心指令都不支持 kebab-case，你应该使用 camelCase。

现在 ngModel指令属于 FormsModule，这就是为什么您应该 import的 FormsModule从 @angular/forms模块内的 imports元数据选项的 AppModule(NgModule)。然后您可以在页面内部使用 ngModel指令。

应用程序/应用程序组件

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

应用程序/应用程序模块

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

演示普朗克

小开

角度2β

这个答案适用于那些使用 Javascript进行 angularJS v. 2.0 Beta 测试的人。

要在视图中使用 ngModel，你应该告诉角度的编译器你正在使用一个名为 ngModel的指令。

怎么做到的？

使用 ngModel在 angular2Beta 中有两个文库，它们是 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";
},


});
小开

根据 Angular2期末考试，你甚至不需要像上面许多人建议的那样导入 FORM_DIRECTIVES。但是，为了改进，语法已更改为 烤肉串的案子被撤销了。

只需用 ngModel替换 ng-model并将其包装在 一盒香蕉中。但是现在您已经将代码分成了两个文件:

应用程序:

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';
}
}

应用程序模块:

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

对我有帮助的答案是: 指令[(ngModel)] = 在 rc5中不再工作

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

小开

instead of ng-model you can use this code:

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


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

在应用程序组件中

小开

重点:

  1. Angular2中的 ngModel 只有在表单模块作为 AppModule 的一部分可用时才有效。

  2. ng-model在语法上是错误的。

  3. square braces [..] refers to the property binding.
  4. 圆括号(. .)表示事件绑定。
  5. 当方括号和圆括号放在一起时，称为[(. . ]]指双向绑定，通常称为香蕉盒。

So, to fix your error.

Step 1: Importing FormsModule

import {FormsModule} from '@angular/forms'

Step 2: Add it to imports array of your AppModule as 

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


}
小开

在应用程序模块中

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

在@NgModule 装饰器的导入后面:

@NgModule({
imports: [
BrowserModule,
FormsModule
]


})
小开

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

应用程序组件

<input type="text" [(ngModel)]="fname" >
\{\{fname}}
export class appcomponent {
fname:any;
}

应用程序模块

import {FormsModule} from '@angular/forms';
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ AppComponent],
bootstrap:    [ AppComponent ]
})

希望这个能帮上忙

小开

在我的例子中，我的 input 元素缺少一个“ name”属性。

小开

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

小开

更新版本的 Angular:

  1. 写成 [(ngModel)] = yourSearch

  2. 在 .ts文件中声明一个名为 yourSearch的空变量(属性)

  3. 在 app.module.ts文件中从 -@angular/forms;添加 FormsModule

  4. 如果应用程序正在运行，则在对其 module.ts文件进行更改时重新启动它

小开

注意 : 为了允许 ngModel 在反应形式中独立存在，我们必须使用如下 NgModelOptions:

 [ngModelOptions]="{ standalone: true }"

For Example :

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

这些东西不见了/错了:

  • 在模块的导入数组中导入 FormsModule(ngModel 需要 FormsModule)
  • NgModel 编写为: [(ngModel)]="modelName"

这样就行了！

小开

如果使用延迟加载模块，则需要在当前模块中导入 ngModule 和 formModule。 例如:

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


imports: [
FormsModule,]

提交答案