无法绑定到'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 { }