Angular 2 RC5 [(ngModel)] 数据绑定失败答案

【问题标题】：Angular 2 RC5 [(ngModel)] Databinding FailureAngular 2 RC5 [(ngModel)] 数据绑定失败
【发布时间】：2016-08-29 01:50:27
【问题描述】：

我一直在查看这段代码，但我被困住了：我有一个绑定到组件模型的表单，[(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>

以及超级简单的组件：

import { Component } from '@angular/core';
import { ToDo } from './todo';
import { ToDoListComponent } from './todo-list';


@Component({
    selector: 'todo-entry',
    templateUrl: 'app/todo-entry.html'
})
export class ToDoEntryComponent {     

    todo:ToDo = new ToDo();   

    new() {
        this.todo = new ToDo();                
    }    
}

和：

从'@angular/core'导入{组件}；

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

如果我使用该代码（无论如何都是一种方式）：

value="{{todo.title}}"

我很确定模块加载和组件引用都是正确的，因为其他一切都按预期显示模型值，只要我不使用 [(ngModel)]。

任何想法我在这里缺少什么？

【问题讨论】：

标签： angular angular2-databinding

【解决方案1】：

我认为问题在于 angular 看到您的 [(ngModel)] 并认为您正在尝试使用 angular 形式，但没有其他支持指令。我不知道为什么你没有得到有用的错误描述。

如果我创建一个使用ngModel 绑定的简单表单，但不否则使用角度表单，我会收到此错误：

错误：如果在表单标签中使用 ngModel，则必须设置 name 属性，或者必须在 ngModelOptions 中将表单控件定义为“独立”。
 Example 1: <input [(ngModel)]="person.firstName" name="first">
 Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

因此，您可以按照错误的说明操作并将 [ngModelOptions]="{standalone: true}" 添加到您的控件中，或者您可以在您的 form 元素上使用毯子 ngNoForm：

<form name="form1" id="form1" novalidate noNoform>

【讨论】：

谢谢，但它最终成为缺少的 FormsModule。一旦它开始工作，我确实收到了缺少名称标签的错误。不知道为什么在调试窗口中没有出现缺少依赖项的错误 - 它只是以白屏静默失败。

【解决方案2】：

永不失败 - 发布此内容并在经过一些额外搜索后在此处找到答案：http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

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

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

以及@NgModule 中的imports 声明：

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

这个错误在编译过程中没有像大多数其他缺失的模块似乎那样触发错误，这很痛苦。不知道为什么这个人不抱怨......

此外，我必须确保我使用了name=title 和id=title。绑定表单元素需要name 属性。

【讨论】：

【解决方案3】：

App 模块应该看起来像这样。确保导入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 { }

【讨论】：

【解决方案4】：

您的 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 { }

【讨论】：