Angular 10：为 FormBuilder 中的嵌套 FormArray 动态添加输入元素

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 错误：ctx_r0.highlights 为空

更新：感谢@Lotte-Lemmens，帮助我解决了null 问题。 但是，我在加载时看不到文本框。也许是因为它是空的，我如何从组件中传递一个空值，以便它循环一次，我也可以看到文本框。

更新：感谢@Eldar，我现在可以看到文本框，并添加更多新亮点。在更新的 StackBlitz 上，添加 hightlight 时更新 stackForm 的值仍然存在问题。当我点击新高亮并添加新高亮时，不会在stackForm.value 的highlights 数组中添加值，只添加第一个值。

但如果我编辑第一个亮点（要重新创建此问题，请先添加多个亮点），所有其他亮点都会立即添加到数组中。

谢谢。

Answer 1

嗯，你需要解决一些问题：

1. 到达FormArray

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

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

1. 要实现目标 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;
}

1. 最后你可以直接绑定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

Answer 2

在您制作的 stackblitz 中，谢谢您，我可以为您的 ngFor 项目添加一个问号。这解决了stackblitz上的错误

"let w of work?.controls; let i=index"
"let hg of highlights?.controls; let j=index"

这将首先检查工作/亮点是否存在，然后循环控制。 我不确定这是否是您的问题，但我希望是...