响应式表单：如何在Angular v14之前的某个时间点将新的FormGroup或FormArray添加到现有的FormGroup中

Question

在StackOverflow的其他例子中，有很多关于在FormArrays中使用FormGroups的问题。但我的问题是相反的。

FormArrays有一个push方法，可以实现许多事情。FormGroup确实有一个addControl方法用于添加简单的FormControls。据我所知，FormGroup没有addFormArray或addFormGroup方法。因此，我需要您的帮助。

下面是具体情况：

this.myForm = this.fb.group({
  id: this.fb.control([this.book.id]),
  // or short form `id: [this.book.id],`
});

稍后添加一个简单的控件很容易：

this.myForm.addControl('isbn', this.fb.control(this.book.isbn));

但是，如果要将FormArrays和FormGroups添加到现有的FormGroup中呢？例如，我想使用以下数组和对象来实现此目的：

const authors  = ['George Michael', 'Aretha Franklin'];
const metaData = { description : 'Great Book', publication: 2019}

我希望添加 `authorsArray` 或 `metaData`，但仅在它们存在时进行。这就是为什么我想在以后添加它们的原因。

注：请忽略验证规则。

- user3025289

---

你好。你可以像添加FormControl一样添加你的FormGroups和FormArrays。 - MullisS

registerControl 也可以正常工作。这两个函数都需要一个 AbstractControl 作为参数。FormGroup 扩展了 AbstractControl，因此对于 FormGroup 也应该适用。 - Joey Gough

你可能想看一下我的这个答案。希望它能有所帮助：https://dev59.com/aarka4cB1Zd3GeqPcl9K#49667898 - Swoox

Answer 1

FormGroup 的 addControl 方法接受一个参数为抽象控件（AbstractControl）的对象，该对象可以是 FormControl、FormArray 或另一个 FormGroup，因为它们都继承自 AbstractControl。

class FormGroup extends AbstractControl {}

class FormControl extends AbstractControl {}

class FormArray extends AbstractControl {}

FormBuilder的array()和group()方法可以帮助您构建此类控件:

this.myForm = this.fb.group({
  id: this.fb.control([this.book.id]),
  authors: this.fb.array(['George Michael', 'Aretha Franklin']),
  metaData: this.fb.group({ description : 'Great Book', publication: 2019})
});

之后您仍然可以使用工厂来构建所需的控件（无论是何种类型的控件）：

this.myForm.addControl('authors',
                       this.fb.array(['George Michael', 'Aretha Franklin']))
this.myForm.addControl('metaData',
                       this.fb.group({description: 'Great Book', publication: 2019}))

- Grégory Elhaimer

---

谢谢，你会如何在上述情况中添加作者和元数据？ - user3025289

this.myForm.addControl('isbn', this.fb.group({ authors : [], metaData: ''})); - 没有测试过，但可能有效。 - Joey Gough

请编辑文本以便更好地理解。 - Grégory Elhaimer

我想你可以使用 this.myForm.addControl('authors',new FormArray(authors .map(x=>new FormControl(x))))。 - Eliseo

或者，如果你想要一个空的表单数组 this.myForm.addControl('authors',new FormArray([]))。 - Eliseo

Answer 2

您可以直接传递 FormArray 而不是 FormControl。

this.form.addControl('arr',this.fb.array([]));

编辑：使用现有值

要使用authors数组中的值，请使用以下代码：

authors.forEach(author => {
  (<FormArray>this.form.controls.arr).push(new FormControl(author));
});

OR

this.myForm.addControl('authors', this.fb.array(['George Michael', 'Aretha Franklin']))

或者

this.myForm.addControl('authors', this.fb.array(['George Michael', 'Aretha Franklin']))

- Sachin Gupta