何时使用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 :

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更具灵活性，因为与使用FormGroup的"addControl"，"removeControl"，"setValue"等相比，使用"push"，"insert"和"removeAt"更容易操作FormControl.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屋！