角度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