如何在 Angular 中将 patchValue 与 FormArray 一起使用？

Question

我有一个 FormGroup ，其中有一个这样的元素。

books: this.fb.array([this.buildBookFormGroup()])

fb 是 FormBuilder。buildBookFormGroup() 函数返回一个 FromGroup，以便我可以从同一表单添加/删除多本书。

buildBookFormGroup(): FormGroup {
    return this.fb.group({
      author: new FormControl(''),
      price: new FormControl(0),
    });
  }

我有获取表单控件、在“书籍”控件中添加和删除表单组的功能。

现在，我已经使用这种形式添加了多本书并保存它们。我想创建一个编辑页面，在其中获取现有数据并填充表单。为此，我使用“patchValue”。但是，patchValue 不适用于 FormArray。看了很多问题和答案，我更加困惑了。这是我修补的方式。

if (this.bookshop.books.length > 0) {
      let booksFormGroupArray: FormGroup[] = [];
      this.bookshop.books.forEach((book, index) => {
        booksFormGroupArray.push(this.buildBookFormGroup());
        Object.keys(booksFormGroupArray[index].controls).forEach(key => {
          booksFormGroupArray[index].patchValue({
            [key]: book[key]
          })
        })
      });
      this.bookForm.patchValue({
        books: this.fb.array(booksFormGroupArray)
      });
    }

只有第一本书对象被插入到表单的“书籍”中。有什么解决方法吗？

Answer 1

使用时，patchValue您必须提供值而不是 FormGroups 数组。

因此，您将 value 直接修补到动态创建的FormGroups 并将该组推送到controls您的s 中array，它将起作用。

因此，新的修补方法将是：

if (this.bookshop.books.length > 0) {
      const bookArray = this.bookForm.get("books") as FormArray;
      bookArray.clear();

      this.bookshop.books.forEach(book => {
        const group = this.buildBookbookFormGroup();
        Object.keys(group.controls).forEach(key => {
          group.patchValue({
            [key]: book[key]
          });
        });
        bookArray.controls.push(group);
      });
    }

如果你想迭代FormArray值，那么：

get books() {
    return (this.bookForm.get("books") as FormArray).controls.map(m => m.value);
}

HTML：

<div *ngFor="let book of books">
    <p>Author: {{book.author}}, &emsp; Price: {{book.price}}</p>
</div>

StackBlitz的工作演示。

结果：