角度2错误：无法解析FormGroup的所有参数

Question

我正在关注FormBuilder的Duringtram教程http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html我复制了代码并更改了一些变量名称。我使用的是Angular 2.1.2，Typescript 2.0.8和Angular Material2（来自Google）。 Atom Typescript说在任何页面上都没有错误。尽管如此，我在加载时遇到错误，并且页面不会加载这个新代码。

zone.js:388 Unhandled Promise rejection: Can't resolve all parameters for FormGroup: (?, ?, ?). ; Zone: <root> ; Task: Promise.then ; Value: Error: Can't resolve all parameters for FormGroup: (?, ?, ?).(…) Error: Can't resolve all parameters for FormGroup: (?, ?, ?). 
at CompileMetadataResolver.getDependenciesMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14598:21) 
at CompileMetadataResolver.getTypeMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14499:28) 
at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14642:43) 
at Array.forEach (native) 
at CompileMetadataResolver.getProvidersMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14622:21) 
at CompileMetadataResolver.getDirectiveMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14262:36) 
at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14367:51) 
at Array.forEach (native) 
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14361:51) 
at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17063:49)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339 
2016-11-10 16:01:40.394 zone.js:390 Error: Uncaught (in promise): Error: Can't resolve all parameters for FormGroup: (?, ?, ?).(…)consoleError @ zone.js:390_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339 

HTML样品为apartment4Rent.component.html

<form [formGroup]="registerApartment4RentForm" (submit)="onSubmit($event)"> 
    <md-input id="country" name="country" class="required" aria-labelledby="country" formControlName="country" 
i18n-placeholder="select country placeholder" placeholder="Country" type="text" size="30" maxlength="30"> 
    </md-input> 

加上4个相同的国家，城市，街道和邮编

AppComponent从教程构造 - 在应用程序文件夹中

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormGroup } from '@angular/forms'; 
import { ReactiveFormsModule } from '@angular/forms'; 

@Component({ 
    moduleId: module.id, 
    selector: 'residence-app', 
    templateUrl: "components/navigation/headerFooter.html", 
    styleUrls: [ "components/navigation/styleHeaderFooter.css" ], 
    providers: [ 
     FormBuilder, 
     FormGroup 
    ] 
}) 
export class AppComponent implements OnInit { 
    registerApartment4RentForm: FormGroup; 
    constructor(private formBuilder: FormBuilder) {} 
    ngOnInit() { 
     this.registerApartment4RentForm = this.formBuilder.group({ 
     country: '', 
     stateProvince: '', 
     address: this.formBuilder.group({ 
      streetAddress: '', 
      zipCode: '', 
      city: '' 
     }) 
     }); 
    } 
} 

的headerFooter.html在templateUrl有一些HTML的报头和报尾以及

  <div> 
       <router-outlet></router-outlet> 
      </div> 

在之间

apartment4Rent.component.html负荷和前我尝试这个反应形式代码出现。我的目录结构是app/components/input/apartment4Rent.component（s）

需要更改以使响应表单有效吗？

Answer 1

您是否将Angular reactive forms模块作为导入添加到模块中？它看起来像缺少该模块注册的服务。

（是我的手机上，为简短的回答很抱歉）

编辑

这就是我的意思是：

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

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

注意的ReactiveFormsModule