将数组值设置为表单组

问题描述

this.formgroup = formbuilder.group({
      os: [null,[Validators.required]],});

const osType= ['Android','Ios']

我尝试过

this.formgroup.controls.os.setValue(osType)

结果

os: ['Android','Ios']

预期结果

os: 'Android'
os: 'Ios'

我需要使用formdata发送数据。我已经尝试过使用setValue，但是得到的结果比我预期的要大。有人可以告诉我该怎么做才能达到预期的结果。预先感谢

解决方法

您需要一个FormControls的FormArray。通常，您使用地图在FormControls中变换数组

this.formarray = this.formbuilder.array(
    this.osType.map(x=>this.formbuilder.control(x))
);

请参见stackblitz

如果要使用setValue，请记住formArray的元素数必须与使用setValue之前的数组相同

注意：如果要管理不在formGroup内的formArray，则需要创建一个辅助函数

  getControl(i)
  {
    return this.formarray.at(i) as FormControl
  }

那你就可以写

<div *ngFor="let control of formarray.controls;let i=index">
    <input [formControl]="getControl(i)">
</div>

注2：在Angular 10之前，您可以采用其他方式：使用像formGroup一样的formArray或使用循环变量来表示控件，但是如今，这是控制formArray“独立”的方式