在 FormArray 中添加嵌套的反应式 FormArray - Angular 6

Question

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

如何在我的 addProductCombination() 方法中实现添加到 productCombination 表单数组。所需的行为是单击 'plus' 按钮的 table 行将为我的 productCombination FormArray 中的每个表单控件创建一个新的 select/input 元素。非常感谢任何帮助。

Answer 1

您可以使用 at 方法从 FormArray 获得一个 AbstractFormControl 实例。

因此，您可以按照以下方式分解必须要做的事情：

从你的 Reactive Form 中获取 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({}));
}

在 FormArray 中添加嵌套的反应式 FormArray - Angular 6

Add Nested Reactive FormArray within FormArray - Angular 6

multidimensional-array

typescript

angular

angular-reactive-forms

angular-forms