我有一个 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)
});
}
只有第一个书籍对象被插入到表单的“书籍”中。有什么解决方法吗?
最佳答案
当您使用 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}},   Price: {{book.price}}</p>
</div>
工作演示 StackBlitz .
结果:
关于angular - 如何在 Angular 中将 patchValue 与 FormArray 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67001989/
相关文章:
javascript - Css 过渡不适用于 React 中的条件渲染
typescript - 类型错误 : Property 'currentTime' does no
javascript - 如果没有 .js 扩展名,则为 ERR_MODULE_NOT_FOUND
azure - Get-AzRoleAssignment 在 Azure Runbook 中引发 M
sql-server - SQL 服务器 : splitting a row into severa
azure - 对于高级、低延迟、带有搜索功能的大量小型 json 文件,Azure BlockBl
google-apps-script - 在多个工作表中搜索一个词