Angular 角度2 RC5[（ngModel）]数据绑定故障

我已经看了这段代码一段时间了，我被卡住了：我有一个表单，我正在绑定到一个组件模型，

[（ngModel）]

绑定会破坏页面-页面不会呈现。我没有得到编译错误和运行时调试器错误，但页面不会呈现

在这个页面上，模型工作正常-我可以看到模型值在

{{todo.title}}

中正常，但是当我尝试将值绑定到[（ngModel）]=“todo.title”的表单控件时，应用程序中断

以下是表格：

<form name="form1" id="form1" novalidate>
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-bookmark"></i> </span>
            <input class="form-control"
                    name="title"
                    [(ngModel)]="todo.title"
                    placeholder="Enter the title for this ToDo"
                    required >
        </div>
    </div>
</form>

以及：

从'@angular/core'导入{Component}

@Component({})
export class ToDo {
    title:string = "new todo";
    entered:Date = new Date();
}

如果我使用：

value="{{todo.title}}"

我非常确定模块加载和组件引用都是正确的，因为其他一切都按照预期工作，显示模型值，只要我不使用[（ngModel）]

---

有什么想法我在这里遗漏了什么吗？

永不失败-发布此消息，并在进行额外搜索后在此处找到答案：

问题是缺少表单模块的导入。在RC5及更高版本中，必须在模块定义中添加以下内容：

 import { FormsModule } from '@angular/platform-browser';

和

@NgModule

中的

导入

声明：

@NgModule({
  imports: [ BrowserModule,FormsModule ],
  ...
}

令人痛心的是，这个错误在编译过程中并没有像大多数其他缺失的模块那样引发错误。不知道为什么这个人不抱怨

---

此外，我必须确保在使用

name=title

的同时（或替代）使用

id=title

<代码>名称属性是绑定表单元素所必需的。

我认为问题在于angular看到了您的

[（ngModel）]

并认为您试图使用angular表单，但没有其他支持指令。我不知道为什么你没有得到一个有用的错误描述

如果我创建了一个使用

ngModel

绑定但不使用角度形式的简单表单，则会出现以下错误：

错误：如果在表单标记中使用ngModel，则必须在ngModelOptions中设置name属性或将表单控件定义为“独立”

 Example 1: <input [(ngModel)]="person.firstName" name="first">
 Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

---

您的app.module.ts应如下所示：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, provideForms, disableDeprecatedForms } from '@angular/forms';
import { AppComponent } from './app.component';

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

export class AppModule { }

---

应用程序模块应该是这样的。确保导入

FormsModule

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

---

谢谢，但它最终是丢失的FormsModule。一旦进入，它开始工作，我确实得到了一个丢失的名称标签错误。不确定为什么调试窗口中没有出现缺少依赖项的错误-它只是在白色屏幕上无声地失败了。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, provideForms, disableDeprecatedForms } from '@angular/forms';
import { AppComponent } from './app.component';

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

export class AppModule { }

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }