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

Question

我正在关注 Thoughtram 的 FormBuilder 教程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 示例 for 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: ''
        })
      });
    }
}

templateUrl 中的 headerFooter.html 有一些用于页眉和页脚的 html 和

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

在我尝试此反应式表单代码之前，在 apartment4Rent.component.html 加载和出现的位置之间。我的目录结构是 ap​​p/components/input/apartment4Rent.component(s)

要使响应式表单起作用，必须进行哪些更改？

Answer 1

您是否将 Angular 响应式表单模块作为导入添加到您的模块中？看起来它缺少该模块注册的服务。

（我在打电话，很抱歉简短的回答）

编辑

这就是我的意思：

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 的导入

Answer 2

此错误的另一个原因是您两次导入表单组。我在我的应用模块中删除了它，现在它对我有用，希望它对某人有所帮助。