Javascript 如何用角反应形式的嵌套数组字段构建字段数组？

我有一个表格，负责创建调查。 每个调查都有问题，每个问题都有选项

调查可能有很多问题

这个问题可以有很多选择

因此，我需要一些像贝娄截图

---

看看这个。我正在使用FormGroupArray创建一个动态问题/选项列表

// Component
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  public view: any;
  surveyForm: FormGroup;
  surveyQuestions: FormArray;
  surveyOptions: any[] = [];
  formData: string;
  constructor(private formbuilder: FormBuilder)  {
  }
  ngOnInit() {
    this.surveyForm = this.formbuilder.group({
      survey: this.formbuilder.array([this.createSurveyQuestion()])
    });
  }

  createSurveyQuestion(): FormGroup {
    return this.formbuilder.group({
      question: [''],
      options: this.formbuilder.array([this.createOption()])
    });
  }
  createOption(): FormGroup {
    return this.formbuilder.group({
      option: ['']
    });
  }

  addQuestion(): void {
    this.surveyQuestions = this.surveyForm.get('survey') as FormArray;
    this.surveyQuestions.push(this.createSurveyQuestion());
  }
  addOption(indx: number): void {
    let questCtrl =  <FormArray>this.surveyForm.get('survey');
    let m = questCtrl.controls[indx];
    let opts = m.get('options') as FormArray;
    opts.push(this.createOption());
  }
  get getSurveyControls() {
    return <FormArray>this.surveyForm.get('survey');
  }
  getQuestionOptionControls(questIndex: number){
    let questCtrl =  <FormArray>this.surveyForm.get('survey');
    let m = questCtrl.controls[questIndex];
    let opts = <FormArray>m.get('options');
    return opts;
  }
  convertFormData() {
    this.formData = JSON.stringify(this.surveyForm.value);
  }
}

//组件
从“@angular/core”导入{Component，OnInit}；
从'@angular/forms'导入{FormGroup，FormBuilder，FormArray}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
标题=‘应用程序’；
公众观点：任何；
调查形式：FormGroup；
调查问题：形式安排；
调查：任何[]=[]；
formData：字符串；
构造函数（专用formbuilder:formbuilder）{
}
恩戈尼尼特（）{
this.surveyForm=this.formbuilder.group({
调查：this.formbuilder.array（[this.createSurveyQuestion（）]））
});
}
createSurveyQuestion（）：FormGroup{
返回此.formbuilder.group({
问题：['']，
选项：this.formbuilder.array（[this.createOption（）]）
});
}
createOption（）：FormGroup{
返回此.formbuilder.group({
选项：['']
});
}
addQuestion（）：无效{
this.surveyQuestions=this.surveyForm.get（'survey'）作为FormArray；
this.surveyQuestions.push（this.createSurveyQuestion（））；
}
addOption（indx:number）：无效{
让questCtrl=this.surveyForm.get（'survey'）；
设m=questCtrl.controls[indx]；
让opts=m.get（'options'）作为FormArray；
opts.push（this.createOption（））；
}
获取GetSurveyControl（）{
返回此.surveyForm.get（'survey'）；
}
GetQuestionOptionControl（查询索引：编号）{
让questCtrl=this.surveyForm.get（'survey'）；
设m=questCtrl.controls[questIndex]；
让opts=m.get（'options'）；
返回选项；
}
convertFormData（）{
this.formData=JSON.stringify（this.surveyForm.value）；
}
}

模板-

// Template 
<form [formGroup]="surveyForm">
    <button (click)="addQuestion()">Add Question</button>
  <div formArrayName="survey" *ngFor="let quest of getSurveyControls.controls; index as i;" [attr.data-index]="i">
    <div [formGroupName]="i">
      <input formControlName="question" placeholder="Question"/>
      <button (click)="addOption(i)">Add Option</button>
      <div formArrayName="options" *ngFor="let opt of getQuestionOptionControls(i).controls; index as oidx;"[attr.data-index]="oidx">
        <div [formGroupName]="oidx">
          <input formControlName="option" placeholder="option"/>
        </div>
      </div>
    </div>
  </div>
</form>

<pre> {{surveyForm.value | json }}</pre>

//模板
添加问题
添加选项
{{surveyForm.value | json}

您想在表单中添加动态输入字段吗？是的，正如您所看到的，按钮add question将添加新的问题输入，按钮add option将为每个问题添加选项

错误：无法找到路径为“questions->options->0”的控件。

您能创建一个plunk或其他东西吗？这样我就可以看到发生了什么？