Angular 10 : Dynamically add input element for nested FormArray inside FormBuilder

Question

这是我的StackBlitz Demo App的链接
我正在尝试使用 FormBuilder array() 方法动态添加输入字段。
要获得清晰的视野，请查看我的 ngOnInit()和依赖方法

stackForm: FormGroup;

get work(): FormArray {
  return this.stackForm.get('work') as FormArray;
}

get highlights(): FormArray {
  return this.stackForm.get('work.highlights') as FormArray;
}

ngOnInit() {
    this.stackForm = new FormGroup({
        'work': this.fb.array([this.buildWork()])
    })        
}      

buildWork(): FormGroup {
    return this.fb.group({
        company: '',
        position: '',
        summary: '',
        highlights: this.fb.array([this.buildHighlights()])
    });
}

buildHighlights(): FormControl {
    return new FormControl()
}

HTML实现是这样的:

<div formArrayName="highlights">
    <div [formGroupName]="j"
          *ngFor="let hg of highlights.controls; let j=index">
     <!-- input element -->
    </div>
</div>

但是我在控制台上收到此错误消息，并且未显示我的输入字段。

ERROR Error: ctx_r0.highlights is null

更新:感谢@Lotte-Lemmens，帮助我找出了 null问题。
但是，我在加载时看不到文本框。也许因为它是空的，我如何从组件传递一个空值，以便它循环一次，我也可以看到文本框。
更新:感谢@Eldar，我现在可以看到文本框，并为新亮点添加更多内容。在更新的 StackBlitz 上，更新 stackForm 的值仍然存在问题添加高光时。当我单击新高亮并添加新高亮时，该值未添加到 highlights 中stackForm.value 中的数组，仅添加第一个值。
但是，如果我编辑第一个亮点(要重新创建此问题，请先添加多个亮点)，所有其他亮点都会立即添加到数组中。
谢谢。

Answer 1

好吧，您需要解决一些问题:

联系 FormArray

 <div [formGroupName]="j" *ngFor="let hg of highlights(i); let j=index">

由于您正在访问表单数组(工作是 FormArray)，因此您需要访问正确的表单数组项。为此，您需要使用上述索引。

要实现目标 1。您需要更改您的 highlights属性转换为接受索引的函数:

highlights(i :number): Array<FormControl> {
    let c =((this.stackForm.get('work') as FormArray).controls[i].get('highlights') as FormArray).controls as Array<FormControl>;
    return c;
}

最后可以直接绑定(bind)formControl而是使用 formControlName

<input class="form-control"
                              id="{{'highlightsId' + j}}"
                              type="text"
                              placeholder="Highlights"
                              [formControl]="hg">

编辑:
要添加新的亮点，您需要更改方法，如下所示:

 addHighlights(i = 0): void {
    this.highLightFormArray(i).push(this.buildHighlights());
  }

StackBlitz