角度2错误:无法解析FormGroup的所有参数 [英] angular 2 error: Can't resolve all parameters for FormGroup

问题描述

我正在关注ThoughtBuild的FormBuilder教程

I am following Thoughtram's tutorial for FormBuilder http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html I copied the code and changed a few variable names. I'm using Angular 2.1.2, Typescript 2.0.8, and Angular Material2 (from Google). Atom Typescript says no error on any page. Nonetheless, I get errors at load, and the page does not load with this new code.

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

HTML sample 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个相同的州，城市，街道和邮政编码

plus 4 more identically for state, city, street, and ZIPcode

AppComponent ，其中包含本教程中的构造函数-在app文件夹中

AppComponent with constructor from the tutorial - in the app folder

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用于页眉，页脚和

The headerFooter.html in the templateUrl has some html for a header and a footer and

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

在尝试此反应性表单代码之前，

在apartment4Rent.component.html加载并出现的位置之间.我的目录结构是app/components/input/apartment4Rent.component(s)

in between where apartment4Rent.component.html loads and appears before I tried this reactive form code. My directory structure is app/components/input/apartment4Rent.component(s)

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

What has to change to make reactive forms work?

推荐答案

您是否已将Angular反应表单模块作为导入添加到模块中?似乎缺少该模块注册的服务.

Did you add the Angular reactive forms module as an import to your module? It looks like it's missing the services that are registered by that module.

(我手机上的电话，非常抱歉，简短回答)

(am on my phone, so sorry for the brief answer)

修改

这是我的意思:

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

Note the import of ReactiveFormsModule

这篇关于角度2错误:无法解析FormGroup的所有参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！