指令 [(ngModel)]= 在 rc5 中不再工作答案

【问题标题】：The directive [(ngModel)]= not working anymore in rc5指令 [(ngModel)]= 在 rc5 中不再工作
【发布时间】：2016-12-17 14:20:15
【问题描述】：

ngModel 抛出异常，这在 rc4 中运行良好

<input [(ngModel)]="par.name" placeholder="name" />

这些是例外：

zone.js@0.6.12?main=browser:260 未捕获的异常：错误 ./CommunityListComponent 类 CommunityListComponent - 内联模板：10:27 原始异常：表单控件没有值访问器具有未指定名称的原始堆栈跟踪：错误：无值访问器用于未指定名称的表单控件

【问题讨论】：

标签： angular

【解决方案1】：

试试这样-

import { Component, OnInit } from '@angular/core';
import { FORM_DIRECTIVES } from '@angular/common';

    @Component({
      selector: 'my-app',
      template: `<h1>My First Angular 2 App</h1>

      <input [(ngModel)]="employee.empName">

      `,
      directives: [FORM_DIRECTIVES]
    })
    export class AppComponent { 
      employee = { empName: 'Sanket', email: '', phone: '', address:'' };

       ngOnInit() { 
       }
    }

这在 RC5 中对我有用。

参考 - https://angular.io/docs/ts/latest/api/common/index/NgModel-directive.html

【讨论】：

谢谢-它也对我有用-尽管我使用的是文档中指示的 rc.5 FromModule 和 ngModel 定义-我不确定它为什么会发生。 FORM_DIRECTIVES 应该被弃用。

【解决方案2】：

也可以通过将 FormsModule 导入您的引导模块来解决，然后它将对所有组件可用。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from 'app/components/app';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

【讨论】：

教程本身也有提到-https://angular.io/tutorial/toh-pt1#import-the-formsmodule

【解决方案3】：

现在您需要在输入中设置名称。例如；

<input [(ngModel)]="par.name" **name="name"** placeholder="name" />

并且所有指令都必须在 *.module.ts 上设置。

【讨论】：

【解决方案4】：

在 RC5 的表单中使用双向绑定语法时需要做的两件事。

在您的 app.module.ts 中包含 FormsModule
在您的 html 输入标签中使用 name 属性，如下所示：

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

就是这样。

【讨论】：

谢谢。这对我有帮助。我看了 4 个教程，现在其中一个提到必须放入名称标签

【解决方案5】：

您需要明确告诉它正在进行更改。请注意：

导入{ChangeDetectorRef}
在构造函数中声明它的对象。
this.object.detectChanges(); 在进行更改的函数中

【讨论】：

【解决方案6】：

在 app.module.ts

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

然后在@NgModule(){imports:[FormsModule]}和其他工作人员一起

【讨论】：

【解决方案7】：

还有一个简单的替代方法如下：

item: string = "";

<input name= "item" (input)= "item=$event.target.value">
<h1>{{item}}<h1>

【讨论】：