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

Posted 2023-02-22

【中文标题】使用 ngModel 的 Angular 2 双向绑定不起作用

【英文标题】：Angular 2 two way binding using ngModel is not working

【发布时间】：2015-10-15 21:56:31

【问题描述】：

无法绑定到“ngModel”，因为它不是“输入”元素的已知属性，并且没有具有相应属性的匹配指令

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

【参考方案1】：

Angular 已于 9 月 15 日发布了其最终版本。与 Angular 1 不同，您可以在 Angular 2 中使用 ngModel 指令进行双向数据绑定，但您需要以类似于 [(ngModel)] 的方式编写它（Banana in a box syntax）。现在几乎所有 angular2 核心指令都不支持kebab-case，而应该使用camelCase。

现在ngModel 指令属于FormsModule，这就是为什么你应该import FormsModule 来自@angular/forms 模块内的imports 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/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

【参考方案2】：

要点：

angular2 中的 ngModel 仅当 FormsModule 可作为 AppModule 的一部分使用时才有效。

ng-model 语法错误。

方括号 [..] 指的是属性绑定。 圆括号 (..) 指的是事件绑定。 当方括号和圆括号放在一起时，[(..)] 指的是双向绑定，通常称为香蕉盒。

所以，修复你的错误。

第 1 步： 导入 FormsModule

import FormsModule from '@angular/forms'

第 2 步：将其添加到您的 AppModule 的导入数组中

imports :[ ... , FormsModule ]

第三步：将ng-model改成ngModel，香蕉盒改成

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

注意：另外，您可以分别处理两种方式的数据绑定以及以下

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

valueChange(value)

【参考方案3】：

就我而言，我的输入元素上缺少“名称”属性。

【讨论】：

天哪！谢谢。

【参考方案4】：

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

【参考方案5】：

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

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

【讨论】：

是的，我遇到了同样的问题。我将名称属性放入输入并工作

到底是什么鬼？为什么它甚至需要那个属性？这对我来说是最出乎意料的解决方案。

【参考方案6】：

在 app.module.ts 中

import  FormsModule  from '@angular/forms';

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

@NgModule(
imports: [
BrowserModule,
FormsModule
]

)

【参考方案7】：

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

 [ngModelOptions]=" standalone: true "

例如：

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

【参考方案8】：

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]

@PeterJ.Hart，实际上ng.common.NgModel 包含指令ngModel 的定义。 ng.common.FORM_DIRECTIVES 正在对一些指令进行分组，包括 ngModel，这些指令在表单中很有用。所以我们不想包含表单的每一个指令，只包含ng.common.FORM_DIRECTIVES

【参考方案9】：

对于较新版本的 Angular：

-写成[(ngModel)] = yourSearch

在.ts 文件中声明一个名为yourSearch 的空变量（属性）

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

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

【参考方案10】：

这些东西不见了/错了：

在模块的导入数组中导入

FormsModule

（ngModel 需要 FormsModule） ngModel 写成：

[(ngModel)]="modelName"

这样，它就可以正常工作了！

【参考方案11】：

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

【参考方案12】：

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

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

希望对你有帮助

【参考方案13】：

在您的 AppModule 中导入 FormsModule 以使用两种方式绑定 [(ngModel)] 与您的

【讨论】：

如果可能，请努力提供额外的解释，而不仅仅是代码。此类答案往往更有用，因为它们可以帮助社区成员，尤其是新开发人员更好地理解解决方案的推理，并有助于避免需要解决后续问题。

【参考方案14】：

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

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

imports: [
    FormsModule,]