When to use FormGroup vs. FormArray?

FormGroup:

A FormGroup aggregates the values of each child FormControl into one object, with each control name as the key.

const form = new FormGroup({
first: new FormControl('Nancy', Validators.minLength(2)),
last: new FormControl('Drew')
});

FormArray:

A FormArray aggregates the values of each child FormControl into an array.

const arr = new FormArray([
new FormControl('Nancy', Validators.minLength(2)),
new FormControl('Drew')
]);

When should one be used over the other?

99471 次浏览
小开
最佳答案

FormArray 是 FormGroup 的变体。关键区别在于它的数据被序列化为数组(而不是在 FormGroup 中被序列化为对象)。当您不知道组中将存在多少个控件(如动态窗体)时，这可能特别有用。

让我用一个简单的例子来解释。比方说，您有一个表单，可以在其中获取客户的披萨订单。然后放置一个按钮，让他们添加和删除任何特殊请求。下面是组件的 html 部分:

<section>
<p>Any special requests?</p>
<ul formArrayName="specialRequests">
<li *ngFor="let item of orderForm.controls.specialRequests.controls; let i = index">
<input type="text" formControlName="\{\{i}}">
<button type="button" title="Remove Request" (click)="onRemoveSpecialRequest(i)">Remove</button>
</li>
</ul>
<button type="button" (click)="onAddSpecialRequest()">
Add a Request
</button>
</section>

下面是定义和处理特殊请求的组件类:

constructor () {
this.orderForm = new FormGroup({
firstName: new FormControl('Nancy', Validators.minLength(2)),
lastName: new FormControl('Drew'),
specialRequests: new FormArray([
new FormControl(null)
])
});
}


onSubmitForm () {
console.log(this.orderForm.value);
}


onAddSpecialRequest () {
this.orderForm.controls
.specialRequests.push(new FormControl(null));
}


onRemoveSpecialRequest (index) {
this.orderForm.controls['specialRequests'].removeAt(index);
}

FormArray 比 FormGroup 提供了更多的灵活性，因为使用“ push”、“ insert”和“ RemoveAt”比使用 FormGroup 的“ addControl”、“ RemoveControl”、“ setValue”等更容易操作 FormControls。FormArray 方法确保在窗体的层次结构中正确跟踪控件。

希望这能帮上忙。

小开

In order to create a reactive forms, a parent FormGroup is a must. This FormGroup can further contain formControls, child formGroups or formArray

FormArray can further contain array of formControls or a formGroup itself.

什么时候应该使用 formArray？

请阅读这个美丽的 post解释 formArray的用法

该博客中有趣的例子是关于 formGroup的旅行

使用 formControl和 formArray的行程 formGroup的结构如下:

this.tripForm = this.fb.group({
name: [name, Validators.required],
cities: new FormArray(
[0] ---> new FormGroup({
name: new FormControl('', Validators.required),
places: new FormArray(
[0]--> new FormGroup({
name: new FormControl('', Validators.required),
}),
[1]--> new FormGroup({
name: new FormControl('', Validators.required),
})
)
}),
[1] ---> new FormGroup({
name: new FormControl('', Validators.required),
places: new FormArray(
[0]--> new FormGroup({
name: new FormControl('', Validators.required),
}),
[1]--> new FormGroup({
name: new FormControl('', Validators.required),
})
)
}))
})

不要忘记玩这个 演示，并注意数组的使用 cities和 places的旅行。

小开

从角度方面的文献可以看出

FormArray is an alternative to FormGroup for managing any number of 与窗体组实例一样，您可以动态地 从窗体数组实例中插入和移除控件，以及窗体 数组实例值和验证状态是从其 但是，您不需要为每个子控件定义一个键 控件，所以如果您不知道 子值的数目。

让我给你看他们的例子，并试着解释我是如何理解这一点的

想象一下，一个表单有以下字段

  profileForm = this.fb.group({
firstName: ['', Validators.required],
lastName: [''],
address: this.fb.group({
street: [''],
city: [''],
state: [''],
zip: ['']
}),
aliases: this.fb.array([
this.fb.control('')
])
});

这里我们有 firstName，lastName，address和 aliases所有的领域一起是形式组，所以我们包装的一切在 group。同时，address就像一个子组，所以我们把它包装在另一个 group(你可以查看模板，以便更好地理解) ！这里的每个表单控件都有 key，除了 aliases，这意味着您可以像使用 formBuilder方法(如 lastName0)的简单数组那样随心所欲地输入它的值。

我是这么理解的，希望能帮到别人。

小开

来自: Anton Moiseev 的书“带打字稿的角度发展，第二版”:

当你需要从 以编程方式添加(或删除)到 控制到 表格时，使用 FormArray。它类似于 FormGroup，但有一个 长度变量长度变量。FormGroup代表 整个表单或表单字段的固定子集，而 FormArray通常代表 可以增大或缩小的窗体控件的集合。

例如，您可以使用 FormArray允许用户输入任意数量的电子邮件。


提交答案