无法绑定到“ngModel”，因为它不是“输入”的已知属性，尽管导入了 FormsModule [重复]答案

【问题标题】：Can't bind to 'ngModel' since it isn't a known property of 'input' despite importing FormsModule [duplicate]无法绑定到“ngModel”，因为它不是“输入”的已知属性，尽管导入了 FormsModule [重复]
【发布时间】：2016-12-26 16:07:44
【问题描述】：

我正在关注Angular 2 tutorial on MVA。我似乎无法让两种方式绑定工作。我在Can't bind to 'ngModel' since it isn't a known property of 'input' 中应用了修复程序，但这不起作用。错误如下：

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
        <p>
            <input [ERROR ->][(ngModel)]="sampleText" ><br/>
            <span>{{sampleText}}</span>
        </p>
"): TasksComponent@2:19 ; Zone: <root> ; Task: Promise.then ;

我的main.ts代码如下：

import { bootstrap } from '@angular/platform-browser-dynamic';
import { Component, OnInit } from '@angular/core';

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


@Component({
    selector: 'tasks',
    template: `
        <p>
            <input [(ngModel)]="sampleText" ><br/>
            <span>{{sampleText}}</span>
        </p>
    `
})
export class TasksComponent implements OnInit {
    sampleText: string = "";
    ngOnInit() {}
}

@Component({
    selector: 'app',
    directives: [TasksComponent],
    template: `
        <h1>Hello World</h1>
        <tasks></tasks>
    `
})
export class AppComponent implements OnInit {
    constructor() {}

    ngOnInit() {}
}

bootstrap(AppComponent);

如果我注释掉双向绑定，代码就可以工作。我该如何解决这个问题？

【问题讨论】：

您使用的是哪个版本的 Angular RC？如果 RC5 可以添加根 NgModule 吗？
我正在使用 RC5。我还没有创建任何模块。 main.ts 是我在 app 文件夹中创建的唯一文件。
您尝试了假设的修复方法，它有效吗？
您需要创建一个根 NgModule，在其中导入 FormsModule
你能在哪里解决这个问题？

标签： angular angular2-forms

【解决方案1】：

你可以在下面使用，

 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { Component, OnInit } from '@angular/core';

 // Import and use below directive
 import { FORM_DIRECTIVES } from '@angular/forms'; 


 @Component({
    selector: 'tasks',
    template: `
     <p>
        <input [(ngModel)]="sampleText" ><br/>
        <span>{{sampleText}}</span>
     </p>
   `
   , directives: [FORM_DIRECTIVES]
 })
 export class TasksComponent implements OnInit {
   sampleText: string = "";

   constructor() {}
 
   ngOnInit() {}
 }

 @Component({
   selector: 'my-app',
   directives: [TasksComponent],
   template: `
      <h1>Hello World</h1>
      <tasks></tasks>
    `
 })
export class AppComponent implements OnInit {
   constructor() {}

   ngOnInit() {}
}

bootstrap(AppComponent);

这里是Plunker!!

但是你应该考虑使用NgModule，并在其中导入FormsModule。

【讨论】：