反应式表单:如何在 Angular 7/8/9 的稍后时间点将新的 FormGroup 或 FormArray 添加到现有的 FormGroup 中 [英] Reactive Forms: 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 的问题.但我的问题恰恰相反.

In the other examples at StackOverflow there are many questions about using FormGroups in FormArrays. But my question is the opposite.

FormArrays 有一个 push 方法，可以让很多事情成为可能.FormGroups 确实有一个 addControl 方法来添加简单的 FormControls.AFAIK FormGroups 没有 addFormArray 或 addFormGroup 方法.所以我需要你的帮助.

FormArrays have a push method, that makes many things possible. FormGroups have indeed an addControl method for adding simple FormControls. AFAIK FormGroups do not have addFormArray or addFormGroup method. Therefore I need your help.

以下情况:

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

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

Adding a simple control at a later point in time is easy:

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

但是如何将 FormArrays 和 FormGroups 添加到现有的 FormGroup 中呢?例如，我想为此使用以下数组和对象:

But what about adding FormArrays and FormGroups into an existing FormGroup? For instance, I would like to use the following array and object for this purpose:

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

我想仅在 authorsArray 或 metaData 存在时添加它们.这就是为什么我想稍后添加它们的原因.

I would like to add authorsArray or metaData only then if they are existing. That's the reason, why I want to add them at a later time.

附言请忽略验证规则.

推荐答案

FormGroup addControl 方法接受 AbstractControl 作为参数，它可以是 FormControl 或 FormArray 或另一个 FormGroup 因为它们都扩展了 AbstractControl.

FormGroup addControl method accepts AbstractControl as parameter which can be either a FormControl or a FormArray or another FormGroup as they all extend AbstractControl.

class FormGroup extends AbstractControl {}

class FormControl extends AbstractControl {}

class FormArray extends AbstractControl {}

FormBuilder 可以帮助您使用 array() 和 group() 方法:

FormBuilder can help you building such controls with array() and group() methods:

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

之后你仍然可以使用工厂来构建你需要的控件(无论是哪种控件):

You still can use the factory afterwards to build the controls you need (no matter what kind of control it is):

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

这篇关于反应式表单:如何在 Angular 7/8/9 的稍后时间点将新的 FormGroup 或 FormArray 添加到现有的 FormGroup 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！