沒法綁定到「 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]
})