反應式表單：如何在 Angular 7/8/9 的稍后時間點將新的 FormGroup 或 FormArray 添加到現有的 FormGroup 中

Question

在 StackOverflow 的其他示例中，有很多關於在 FormArrays 中使用 FormGroups 的問題。 但我的問題恰恰相反。

FormArrays 有一個 push 方法，可以讓很多事情成為可能。 FormGroups 確實有一個 addControl 方法來添加簡單的 FormControl。 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如果它們存在的話。 這就是為什么我想稍后添加它們的原因。

ps 請忽略驗證規則。

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

Answer 2

您可以簡單地傳遞FormArray而不是FormControl 。

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

編輯：使用現有值

要使用authors數組中的值，請使用以下命令：

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

或者

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