无法绑定到'formGroup'，因为它不是'form'的已知属性

Question

无法绑定到'formGroup'，因为它不是'form'的已知属性

情况：

请帮忙！我试图在我的Angular2应用程序中制作一个非常简单的表单，但无论它从不工作。

角度版本：

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

问题：

为什么我会收到这个错误？

我错过了什么吗？

Answer 1

RC5 FIX你需要import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'在你的控制器，并把它添加到directives的@Component。这将解决问题。修复之后，您可能会收到另一个错误，因为您没有formControlName="name"在表单中添加输入。RC6 / RC7 /最终版本FIX要修复此错误，您只需ReactiveFormsModule从@angular/forms模块中导入即可。以下是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的官方文档页面上阅读更多相关信息。

Answer 2

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