没法绑定到“ formGroup”，由于它不是“ form”的已知属性

状况：

请帮忙！ 我正在尝试使Angular2应用程序中的表单变得很是简单，可是无论它永远没法工做。

角版本：

角2.0.0 Rc5

错误：

Can't bind to 'formGroup' since it isn't a known property of 'form'

编码：

风景：

<form [formGroup]="newTaskForm" (submit)="createNewTask()">

    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" required>
    </div>

     <button type="submit" class="btn btn-default">Submit</button>

</form>

控制器：

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';

@Component({
    selector: 'task-add',
    templateUrl: 'app/task-add.component.html'

})


export class TaskAddComponent {

    newTaskForm: FormGroup;

    constructor(fb: FormBuilder) 
    {
        this.newTaskForm = fb.group({
            name: ["", Validators.required]
        });
    }

    createNewTask()
    {
        console.log(this.newTaskForm.value)
    }

}

ngModule：

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

import { routing }        from './app.routing';
import { AppComponent }  from './app.component';
import { TaskService } from './task.service'


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


export class AppModule { }

问题：

为何会出现该错误？

我想念什么吗？

---

#1楼

RC5修复

您须要import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'控制器中的import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'并将其添加到@Component directives中。 这样能够解决问题。

解决此问题以后，您可能会遇到另外一个错误，由于您没有将formControlName="name"添加到表单中的输入中。

RC6 / RC7 /最终发行版FIX

要解决此错误，您只须要从模块中的@angular/forms导入ReactiveFormsModule 。 这是带有ReactiveFormsModule导入的基本模块的示例：

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

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

export class AppModule { }

为了进一步说明， formGroup是名为FormGroupDirective指令的选择器，该指令是ReactiveFormsModule的一部分，所以须要导入它。 它用于将现有的FormGroup绑定到DOM元素。 您能够在Angular的官方文档页面上了解更多有关它的信息 。

---

#2楼

对于Angular 4，建议的答案对我不起做用。相反，我不得不使用另外一种带有attr前缀的属性绑定方法：

<element [attr.attribute-to-bind]="someValue">

---

#3楼

将Angular 4与功能模块结合使用（例如，若是您使用共享模块），则还须要导出ReactiveFormsModule才能正常工做。

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { }

---

#4楼

请记住，若是已定义“功能模块”，则即便已导入到AppModule ，也须要导入功能模块。 从Angular文档中：

模块不继承对其余模块中声明的组件，指令或管道的访问。 AppModule导入的内容与ContactModule无关，反之亦然。 在ContactComponent能够与[（ngModel）]绑定以前，其ContactModule必须导入FormsModule。

https://angular.io/docs/ts/latest/guide/ngmodule.html

---

#5楼

若是您必须导入两个模块，则在下面添加以下内容

import {ReactiveFormsModule,FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponentComponent,
    BlogComponentComponent,
    ContactComponentComponent,
    HeaderComponentComponent,
    FooterComponentComponent,
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})