[英]Set data in FormArray in angular reactive form
我有一个 FormGroup,其中包含一个表单数组,我想设置一个从 API 获得的数据数组,但显然我并没有让它完全成为可能。
形式
this.blog = this.fb.group({
title: ['', Validators.required],
description: ['', Validators.required],
date: [date, [Validators.required, this.dateValidator]],
companyId: ['', Validators.required],
isActive: [false],
paragraphs: this.fb.array([])
});
paragraphs(): FormArray {
return this.blog.get("paragraphs") as FormArray
}
newParagraph(): FormGroup {
return this.fb.group({
section: ''
})
}
addParagraph() {
this.paragraphs().push(this.newParagraph());
}
在这里我尝试设置值
this.blog.setControl('paragraphs', this.fb.array(this.blogUpdate.paragraphs || []));
Html代码
<tr *ngFor="let paragraph of paragraphs().controls; let i = index" [formGroupName]="i">
<td colspan="2">
Parrafo:
<textarea formControlName="section" (change)="saverange($event, paragraph.value.paragraphId, i)" [value]="paragraph.value.section" type="text" rows="7"
class="form-control"></textarea>
</td>
</tr>
结果
错误
创建paragraphs() 作为getter 而不是function,并像这样使用它的变量(没有()) -
get paragraphs(): FormArray {
return this.blog.get("paragraphs") as FormArray
}
然后使用 for 循环修补段落数组,其中数据是来自 API 的数组 -
data.forEach(element => {
this.paragraphs.push(this.fb.group(element))
})
请参阅此处的工作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.