在FormArray-Angular 6

Question

我正在尝试使用Angular 6中的嵌套反应式在表行内添加多个输入。我在将TypeScript中的Form Array推送到Form Array时遇到麻烦。我已将完整代码（包括用于插入数据的虚拟服务）添加到stackblitz here

如何在addProductCombination()方法内部实现向productCombination表单数组的添加。所需的行为是，单击“加号”按钮的表行将为我的productCombination FormArray内部的每个表单控件具有一个新的select / input元素。非常感谢您的帮助。

Answer 1

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

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

1. 从您的反应式表单中获取records FormArray。
2. 在此at上调用FormArray方法，并向其传递您要从中获取AbstractControl实例的索引。我以0为例。
3. 这将产生一个AbstractControl实例，其中有productCombination FormArray。因此，您现在需要访问它。这就是(<FormArray>formControl.get('productCombination'))正在做的事情。
4. 一旦获得内部FormArray，就可以在其上调用push方法，并向其传递要添加到其中的AbstractControl实例。

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

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