[英]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.