Angular 角度6反应形式示例在plunker上失败

我有下面的angular 6示例：

//our root app component
import { Component, NgModule, VERSION, Injectable } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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


@Component({
  selector: 'my-app',
  template: `<form [formGroup]="form" novalidate="">
  <div style="margin-bottom:80px">
    <div *ngFor="let item of form.controls; let idx=index" [formGroupName]="idx">
    <div *ngIf='item.controls.type.value == "control"'>
    <div>Input</div>
      <input name="answer" type="text" placeholder="Reponse" formControlName="answer"/>
    </div>
    <div *ngIf='item.controls.type.value == "group"' formGroupName="answer">
    <div>Checkboxes</div>
    <div *ngFor='let ctrl of item.controls.answer.controls; let index=index'>
      <input name="answer" type="checkbox" placeholder="Reponse" [formControlName]="index"/>
    </div>
    </div>
    </div>
  </div>
  <button type="button" (click)="changeTemplate()">New template</button>
</form>`
})

export class App {
    private form:FormArray;

  constructor(private formBuilder:FormBuilder){

  }


  changeTemplate(){

    this.form = this.formBuilder.array([
      this.formBuilder.group({
        answer:[''],
        type:['control']
      }),
      this.formBuilder.group({
        answer:this.formBuilder.array([[''], [''], ['']]),
        type:['group']
      }),
      this.formBuilder.group({
        answer:[''],
        type:['control']
      })
      ]);


  }

  ngOnInit(){
    this.form = this.formBuilder.array([
      this.formBuilder.group({
        answer:this.formBuilder.array([[''], [''], ['']]),
        type:['group']
      }),
      this.formBuilder.group({
        answer:[''],
        type:['control']
      }),
      this.formBuilder.group({
        answer:this.formBuilder.array([[''], [''], ['']]),
        type:['group']
      })
      ]);


  }
}

@NgModule({
    imports: [BrowserModule, ReactiveFormsModule],
    declarations: [App],
    bootstrap: [App],
})
export class AppModule {}

这是普朗克：

---

有人知道如何修复此问题吗？

在应用程序类构造函数中添加

@Inject

装饰程序

export class App {
  private form:FormArray;

  constructor(@Inject(FormBuilder) private formBuilder: FormBuilder){

  }
  ....
}

---

您的

表单

不是

formGroup

类型，而是

formArray

export class App {
  private form:FormArray;

  constructor(@Inject(FormBuilder) private formBuilder: FormBuilder){

  }
  ....
}