Question

我在formArray内以角形创建了一个form。

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

按预期，名字被更改。但是任务没有。为什么？

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

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

如documentation中所述：

FormArray：

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

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

在您的情况下，如果要修补[false, true, false]，则需要将FormArray的任务定义为tasks: new FormArray([new FormControl(), new FormControl(), new FormControl()])，以便准备好填充3个控件。

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

const tasks = [true, false, true];

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

为什么patchValue无法在angular的formArray中工作？

1 个答案: