FormBuilder 给出控制台错误

Question

我正在尝试向我的表单 using this article 添加验证。 当我将构造函数与FormBuilder 一起使用时，它会抛出错误，指出EXCEPTION: Uncaught (in promise): Error: DI Error。

test1.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { FormComponent } from '../form/form.component';

@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styleUrls: ['./test1.component.css']
})
export class Test1Component extends FormComponent {
  complexForm : FormGroup;

  constructor(@Inject(FormBuilder) fb: FormBuilder){
    super();
    this.complexForm = fb.group({
        'firstName' : "",
        'lastName': "",
        'gender' : "Female",
        'hiking' : false,
        'running' : false,
        'swimming' : false
    });
  }

  saveForm(){
    console.log("Child Form save");
    return true;
  }
}

以下是控制台错误

我该如何解决这个问题？

我试图提出一个plunker with an example from angular docs，但它给出了一些其他错误，

编辑 1：

按照 AJT_82 的建议，我将构造函数更改为 constructor(private fb: FormBuilder){。然而它现在给了我另一个错误

Answer 1

更改您尝试在构造函数中注入 FormBuilder 的方式：

constructor(@Inject(FormBuilder) fb: FormBuilder)

简单地说：

constructor(private fb: FormBuilder)

至于第二个错误，这表明您需要确保在您的应用模块中同时拥有FormsModule 和ReactiveFormsModule：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
  ]
  ....
})