在angular中，如何将不同的FormGroup动态添加到FormArray中

Question

我想在这个订单数组中动态添加几个菜。每道菜都是一个FormGroup。菜肴可以是披萨、沙拉、饮料或其他什么。在添加任何内容之前，表单应该如下所示：

this.fb.group({
firstName: ['', Validators.required],
lastName: [''],
order: this.fb.array([])
});

添加菜肴后，形式应该是这样的：

this.fb.group({
firstName: ['', Validators.required],
lastName: [''],
order: this.fb.array([
{type:pizza, name:summerPizza, size:8},
{type:salad, name:goodsalad, size:small},
{type:pizza, name:nicePizza, size:11},
{type:drink, name:beer, brand:abc},
])
});

用户可以添加任意数量的项目。那么如何做到这一点呢？

Answer 1

如果我正确理解您想要什么，那么您可能想要一个返回要添加到formArray的formGroup的方法。

假设这是在组件类上下文中。

英寸：

formGroup = this.fb.group({
firstName: ['', Validators.required],
lastName: [''],
order: this.fb.array([])
});

createOrder(): FormGroup {
return this.fb.group({
type: this.fb.control(""),
name: this.fb.control(""),
size: this.fb.control(""),
brand: this.fb.control(""),
});
}

那么你就有了一个方法，可以调用createOrder并将formGroup添加到formArray中

get ordersFormArray(): FormArray {
return this.formGroup.get('orders') as FormArray;
}

addOrder() {
this.ordersFromArray.push(this.createOrder())
}