将对象转换为动态嵌套表单数组并在html中进行编辑
将对象转换为动态嵌套表单数组并在html中进行编辑
提问于 2020-11-19 16:47:43
DData = {
pData: [
{
unit: "a",
date: "2020-10-25",
qty: 0
},
{
unit: "b",
date: "2020-10-25",
qty: 0
}
], sData: [
{
unit: "c",
name: "C",
date: "2020-10-25",
qty: 4138
}, {
unit: "K",
name: "g",
date: "2020-10-25",
qty: 6498
}
, {
unit: "i",
name: "p",
date: "2020-10-25",
qty: 117
}, {
unit: "K",
name: "M",
date: "2020-10-25",
qty: 0
}
]
}上面是我的对象，我刚刚用下面的代码为相应的对象创建了一个表单组
dDataForm:FormGroup;
const groupP = this.DData.pData.map(p => {
return new FormGroup({
unit: new FormControl(p.unit, Validators.required) ,
date: new FormControl(p.date, Validators.required),
qty: new FormControl(p.qty,Validators.required)
})
})
const groupS = this.DData.sData.map(s => {
return new FormGroup({
unit: new FormControl(s.unit, Validators.required),
name: new FormControl(s.name, Validators.required),
date: new FormControl(s.date, Validators.required),
qty: new FormControl(s.qty,Validators.required)
})
})
this.dDataForm = new FormGroup({
pData: new FormArray(groupP),
sData: new FormArray(groupS)
})我刚刚使用上面的代码将我的对象(DData)转换为表单组(dDataForm)，但是我不可能在我的html中显示这个表单组。我的html代码不工作了。虽然我想创建一个可编辑的数据表。
这是我第一次尝试了很多次，但都没有效果。有什么帮助吗。谢谢
回答 1
Stack Overflow用户
发布于 2020-11-21 17:17:23
<form [formGroup]='dDataForm'>
<table>
<tbody formArrayName='pData'>
<tr *ngFor="let pro of dDataForm.controls.pData.controls; let ploop = index;">
<div formGroupName='ploop'>
<td> <input type="text" formControlName='unit' [placeholder] = 'ploop.unit'> </td>
<td> <input type="text" formControlName='date' [placeholder] = 'ploop.date'> </td>
<td> <input type="text" formControlName='qty' [placeholder] = 'ploop.qty'> </td>
</div>
</tr>
</tbody>
</table>
<table>
<tbody formArrayName='sData'>
<tr *ngFor="let sro of sData.controls; let sloop = index;">
<div formGroupName='sloop'>
<td> <input type="text" formControlName='unit' [placeholder] = 'sloop.unit'> </td>
<td> <input type="text" formControlName='name' [placeholder] = 'sloop.name'> </td>
<td> <input type="text" formControlName='date' [placeholder] = 'sloop.date'> </td>
<td> <input type="text" formControlName='qty' [placeholder] = 'sloop.qty'> </td>
</div>
</tr>
</tbody>
</table>
</form>我只是浏览了一下angular just数组文档https://angular.io/api/forms/FormArray
你应该在FormArray上循环。您应该使用“控件”从表单数组中获取表单组。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64908207
复制相关文章
相似问题
腾讯云开发者
