为什么 patchValue 不能在有角度的 formArray 中工作？

Question

我在有角度的form中创建了一个formArray 。

当我修补具有值为数组的tasks对象时，似乎该属性被忽略且未设置。

正如预期的那样，名字已更改。 但任务不是。 为什么？

我不想捕获特定元素并使用setValue或类似的东西，我只想拥有一个对象，angular 将调查此对象并匹配值和字段。

stackblitz.com 中的代码

import { Component, VERSION } from "@angular/core";
import { FormGroup, FormControl, FormArray } from "@angular/forms";

@Component({
  selector: "my-app",
  template: `
    <form [formGroup]="profileForm">
      {{ profileForm.value | json }}

      <br /><br /><br />
      <label>
        First Name:
        <input type="text" formControlName="firstName" />
      </label>

      <label>
        Last Name:
        <input type="text" formControlName="lastName" />
      </label>

      <button type="button" (click)="clickme()">clickme</button>
    </form>
  `
})
export class AppComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(""),
    lastName: new FormControl(""),
    tasks: new FormArray([])
  });

  clickme() {
    this.profileForm.patchValue({
      firstName: "foo",
      tasks: [false, true, false]
    });
  }
}

Answer 1

如文档中所述：

一个 FormArray ：

Tracks the value and validity state of an array of FormControl, FormGroup or FormArray instances.

FormArray 是一个控件数组，而不是值数组。 您只能将值修补到现有的 formControls。

在你的情况下，如果你想修补[false, true, false] ，你需要将你的任务 FormArray 定义为tasks: new FormArray([new FormControl(), new FormControl(), new FormControl()]) ，所以你有 3 个控件可以填充。

另一种解决方案是循环遍历您的数组，为每个项目推送一个值为new FormControl(data[x]) 。

const tasks = [true, false, true];

tasks.forEach(task => {
  this.profileForm.controls.tasks.push(new FormControl(task));
});