angular - 如何在 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 的数组。

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

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

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 .

结果: