在 FormArray 中添加嵌套的 Reactive FormArray - Angular 6答案

【问题标题】：Add Nested Reactive FormArray within FormArray - Angular 6在 FormArray 中添加嵌套的 Reactive FormArray - Angular 6
【发布时间】：2018-08-23 00:19:55
【问题描述】：

我正在尝试使用 Angular 6 中的嵌套反应式表单在表格行内添加多个输入。我无法在打字稿中推送到表单数组中的表单数组。我已将完整代码（包括用于提取数据的虚拟服务）添加到 stackblitz here

如何在我的addProductCombination() 方法中实现添加到 productCombination 表单数组。所需的行为是单击“加号”按钮的表行将为我的 productCombination FormArray 内的每个表单控件具有一个新的选择/输入元素。非常感谢任何帮助。

【问题讨论】：

标签： angular typescript multidimensional-array angular-reactive-forms angular-forms

【解决方案1】：

您可以使用at 方法从FormArray 获取AbstractFormControl 实例。

因此，您可以通过以下方式分解您必须做的事情：

从您的响应式表单中获取 records FormArray。
在此FormArray 上调用at 方法，并将您想要从中获取AbstractControl 实例的索引传递给它。例如，我使用了0。
这将产生AbstractControl 实例，其中有productCombination FormArray。所以你现在需要访问它。这就是(<FormArray>formControl.get('productCombination')) 正在做的事情。
获得内部 FormArray 后，您可以对其调用 push 方法并将要添加到其中的 AbstractControl 实例传递给它。

所以在代码中，它看起来像：

addProductCombination() {
  let formControl = ( < FormArray > this.productBlendCodeForm.get('records')).at(0);
  ( < FormArray > formControl.get('productCombination')).push(this.initProductCombinations({}));
}

【讨论】：