為什么 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));
});