何时使用FormGroup与FormArray？

Question

FormGroup:

FormGroup将每个子FormControl的值聚合到一个对象中,每个控件名称作为键.

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

FormArray:

FormArray将每个子FormControl的值聚合到一个数组中.

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

应该何时使用另一个？

Answer 1

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

让我试着通过一个简单的例子来解释.比如,您有一个表单,您可以在其中捕获客户对Pizza的订单.然后你放一个按钮让他们添加和删除任何特殊请求.这是组件的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"等更容易操作FormControl.FormArray方法确保控件是在表单的层次结构中正确跟踪.

希望这可以帮助.

Answer 2

为了创建一个反应形式,父母FormGroup是必须的.这FormGroup可以进一步包含formControls,儿童formGroups或formArray

FormArray可以进一步包含数组formControls或formGroup自身.

我们什么时候应该使用formArray？

请阅读这篇美丽的帖子,它解释了用法formArray

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

formGroup使用formControl和旅行的结构formArray看起来像:

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

不要忘记玩这个DEMO,并注意数组的使用cities和places旅行.

Answer 3

来自：Anton Moiseev 的书“Angular Development with Typescript，第二版”。：

当您需要以编程方式 向表单添加（或删除）控件时，请使用FormArray。它类似于FormGroup但有一个长度变量。而FormGroup代表整个表单或表单的字段的固定子集，FormArray通常代表一个可以放大或缩小表单控件的集合。

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