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; 
    } 
} 

コンソールエラー

私はこれをどのように修正すればよいのですか？編集1、

を

は私がplunker with an example from angular docsを入れてみましたが、そのいくつかの他のエラーを配っ：

をAJT_82によって示唆されるように、私がconstructor(private fb: FormBuilder){に私のコンストラクタを変更しました。単純に

constructor(@Inject(FormBuilder) fb: FormBuilder) 

：しかしそのは今からコンストラクタでFormBuilderを注入しようとしている方法を変更するには、

Answer 1

私は別のエラーを与えて

constructor(private fb: FormBuilder) 

として、 2番目のエラーでは、これはあなたが両方とも持っていることを確認する必要があることを示唆していますあなたのアプリモジュールでとReactiveFormsModule：

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

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

は... https://plnkr.co/edit/tEoVU9enXRGWOClJWVQT?p=preview