Angular 14：使用 API 响应传播 FormArray 以在选择选项中使用

Question

我想使用 API 的响应创建多个选择选项输入。

我已经用一个定义了这个表单表格数组输入。

this.myForm = this.fb.group({
  name: [null, [Validators.required]],
  details: this.fb.array([], Validators.required),
});

然后，getter 为 detail 输入 FormArray。

get detailsArr() {
  return this.myForm.get('details') as FormArray;
}

我从服务中获取数据并通过响应传播表单值。服务器对 details 的响应是这样的：

"details": [
  { "detailName": "detail 1", "detailValue": 2},
  { "detailName": "detail 2", "detailValue": 4},
  { "detailName": "detail 3", "detailValue": 5}
]

fetchData() {
  this.dataService.getData().subscribe((res) => {
    // Propagate details
    this.detailsArr.push(this.fb.control(res.details));

    // Propagate name
    this.myForm.patchValue({
      name: res.name,
    });
  });
}

重点是我不知道如何将细节数组的值设置为细节响应.使用 push 方法，我在数组中得到一个数组，我的意思是：

"details": [
  [
    { "detailName": "detail 1", "detailValue": 2}
  ]
]

HTML 如下：

<form [formGroup]="myForm">
  <div formArrayName="details">
    <select *ngFor="let detail of detailsArr.controls; let i = index" [formGroupName]="i">
      <option>{{ detail.detailName }}</option>
    </select>
  </div>
</form>

我在 for 循环中尝试使用 detailsArr.value 并且似乎有效，但不知道为什么。

我刚刚关注了this Angular official documentation，但是没有用。我不知道这是否是解决此问题的正确方法。

Answer 1

对于details数组中的每个元素，您需要将其作为FormGroup推送到detailsArrFormArray。

addDetailFormGroup(detail: any) {
  this.detailsArr.push(
    this.fb.group({
      detailName: detail.detailName,
      detailValue: detail.detailValue,
    })
  );
}

fetchData() {
  this.dataService.getData().subscribe((res) => {
    // Propagate details
    for (let detail of res.details) {
      this.addDetailFormGroup(detail);
    }

  ...
}

Demo @ StackBlitz

更新

正如 Post Owner 所澄清的，他想将从 API 响应接收到的数据绑定为 <select> 元素中的选项，FormArray 不应在他的场景中使用。当表单需要渲染包含多个FormControl或FormGroup的元素时，使用FormArray。