无法绑定到“formGroup”，因为它不是“form”的已知属性
情况：
请帮忙！ 我正在尝试在我的Angular2应用程序中创build一个非常简单的表单，但不pipe它从未工作。
angular度版本：
Angular 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 { }
问题：
为什么我得到这个错误？
我错过了什么吗？
RC5 FIX
您需要import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'控制器中的import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'中import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' ，并将其添加到@Component directives中。 这将解决这个问题。
解决这个问题之后，你可能会得到另一个错误，因为你没有在表单中添加formControlName="name"到你的input。
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指令的select器，它是ReactiveFormsModule的一部分，因此需要导入它。 它用于将现有的FormGroup绑定到DOM元素。 您可以在Angular的官方文档页面上阅读更多关于它的信息 。
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 { }
build议的答案不适用于我与Angular 4。相反，我不得不使用另一种方式的属性绑定与attr前缀：
<element [attr.attribute-to-bind]="someValue">
如果你有两个模块，然后像这样添加
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] })
确定后，我发现一个解决scheme“不能绑定到formGroup”，因为它不是“form”的已知属性。
对于我的情况，我一直在使用多个模块文件，我在app.module.ts中添加了ReactiveFormsModule
import { FormsModule, ReactiveFormsModule } from '@angular/forms';` @NgModule({ declarations: [ AppComponent, ] imports: [ FormsModule, ReactiveFormsModule, AuthorModule, ], ... But this wasn't working when I use a [formGroup] directive from a component added in another module, eg using [formGroup] in author.component.ts which is subscribed in author.module.ts file: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { AuthorComponent } from './author.component'; @NgModule({ imports: [ CommonModule, ], declarations: [ AuthorComponent, ], providers: [...] }) export class AuthorModule {}
我想如果我添加ReactiveFormsModule在app.module.ts，默认ReactiveFormsModule将被所有的子模块inheritance，如author.module在这种情况下…（错误的！）。 我需要在author.module.ts中导入ReactiveFormsModule，以使所有指令都能正常工作：
... import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ... @NgModule({ imports: [ ..., FormsModule, //added here too ReactiveFormsModule //added here too ], declarations: [...], providers: [...] }) export class AuthorModule {}
所以，如果您使用子模块，请确保在每个子模块文件中导入ReactiveFormsModule。 希望这有助于任何人。
请记住，如果您定义了“function模块”，即使您已经导入到AppModule ，也需要在function模块中导入。 从Angular文档：
模块不会inheritance对其他模块中声明的组件，指令或pipe道的访问。 什么AppModule导入与ContactModule无关，反之亦然。 在ContactComponent可以绑定到[（ngModel）]之前，其ContactModule必须导入FormsModule。
对于漫步这些线程的人来说，这个错误。 在我的情况下，我有一个共享模块，我只导出FormsModule和ReactiveFormsModule，忘记导入它。 这造成了一个奇怪的错误，formgroups不能在子组件中工作。 希望这可以帮助人们挠头。
当试图进行e2etesting时，我遇到了这个错误，这让我发疯，没有答案。
如果你正在testing， find你的* .specs.ts文件，并添加：
import {ReactiveFormsModule, FormsModule} from '@angular/forms';
我刚刚做了[formsGroup] ，跟着form ，所以犯规…
