双嵌套（Multi-Level）组件 Angular2

Question

我正在尝试生成一个动态表单，该表单将创建动态数量的问题。我有一个 parent 组件、一个 child-list 组件和一个 chill 组件，您可以在下面看到。尝试生成页面时，我遇到了如下所示的错误。请注意，它正在渲染第一个元素，但在索引 1 上失败了。

这是parent模板

<pif-question-list 
  [questions]="pifQuestions" 
  [parentFormGroupName]="prefundingForm">
</pif-question-list>

这里是 child-list :

<div 
  class="question-container" 
  *ngFor="let question of questions;let idx=index;">
  <pif-question-detail 
    [question]="question" 
    [questionControls]='this.parentFormGroupName?.controls?.questions'>
  </pif-question-detail>
</div>

这是 child :

<div 
  class="form-row" 
  formArrayName="answerTypes">
    <ng-container 
      *ngFor="let answerType of question.answerTypes;let idx=index;" 
      [formGroupName]="idx">
</div>

这是错误：

Uncaught Error: Cannot find control with path: 'answerTypes -> 1'
    at _throwError (forms.js:1591)
    at setUpFormContainer (forms.js:1573)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addFormGroup (forms.js:4325)
    at FormGroupName.push../node_modules/@angular/forms/fesm5/forms.js.AbstractFormGroupDirective.ngOnInit (forms.js:1698)
    at checkAndUpdateDirectiveInline (core.js:9042)
    at checkAndUpdateNodeInline (core.js:10306)
    at checkAndUpdateNode (core.js:10268)
    at debugCheckAndUpdateNode (core.js:10901)
    at debugCheckDirectivesFn (core.js:10861)
    at Object.eval [as updateDirectives] (QuestionDetailComponent.html:9)

Answer 1

试一试： question.answerTypes.controls

双嵌套（Multi-Level）组件 Angular2

Double Nested(Multi-Level) Components Angular2

angular

typescript

reactive-programming

angular-reactive-forms

dynamic-forms