angular - react 形式: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular 7/8/9

在StackOverflow的其他示例中，还有很多关于在FormArrays中使用FormGroups的问题。但是我的问题恰恰相反。
FormArrays具有push方法，这使很多事情成为可能。 FormGroups确实具有用于添加简单FormControl的addControl方法。 AFAIK FormGroups没有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。这就是为什么我以后要添加它们的原因。
p.s.请忽略验证规则。

最佳答案

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}))