何时使用 FormGroup 与 FormArray? [英] When to use FormGroup vs. FormArray?

问题描述

FormGroup:

FormGroup 将每个子 FormControl 的值聚合为一个对象，以每个控件名称为键.

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 将每个子 FormControl 的值聚合到一个数组.

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?

推荐答案

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

FormArray is a variant of FormGroup. The key difference is that its data gets serialized as an array (as opposed to being serialized as an object in case of FormGroup). This might be especially useful when you don’t know how many controls will be present within the group, like dynamic forms.

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

Let me try to explain by a quick example. Say, you have a form where you capture a customer's order for Pizza. And you place a button to let them add and remove any special requests. Here is the component's html part:

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

这里是定义和处理特殊请求的组件类:

and here is the component class defining and handling special requests:

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 方法确保在表单的层次结构中正确跟踪控件.

FormArray offers more flexibility than FormGroup in the sense that it is easier to manipulate FormControls using "push", "insert" and "removeAt" than using FormGroup's "addControl", "removeControl", "setValue" etc. FormArray methods ensure the controls are properly tracked in the form's hierarchy.

希望这会有所帮助.

这篇关于何时使用 FormGroup 与 FormArray?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！