ngFor長出input並同時使用react forms

小弟有個疑問請教各位大大,
我的後端資料:
dataList = [
{
inpectionGroupId: 1,
inspectionGroupName:‘廠區1’,
subsystemList: [
{
inspectionSubsystemId: 5,
inspectionSubsystemName:‘子系統一期’,
itemList:[
{
inspectionItemId:1,
inspectionItemName:‘項目A’,
itemValue:’’,
itemUnit:‘cm’,
abnomalDesc:’’
},
{
inspectionItemId:2,
inspectionItemName:‘項目B’,
itemValue:’’,
itemUnit:‘kg/cm²’,
abnomalDesc:‘壓力過高’
}
]
},
{
inspectionSubsystemId: 2,
inspectionSubsystemName:‘子系統二期’,
itemList:[
{
inspectionItemId:16,
inspectionItemName:‘項目C’,
itemValue:’’,
itemUnit:‘A’,
abnomalDesc:‘電流不穩’
}
]
}
]
},
{
inpectionGroupId: 2,
inspectionGroupName:‘廠區2’,
subsystemList: [
{
inspectionSubsystemId: 10,
inspectionSubsystemName:‘子系統三期’,
itemList:[
{
inspectionItemId:1,
inspectionItemName:‘項目A’,
itemValue:’’,
itemUnit:‘mm’,
abnomalDesc:’’
},
{
inspectionItemId:2,
inspectionItemName:‘項目B’,
itemValue:’’,
itemUnit:‘kg/cm²’,
abnomalDesc:’’
}
]
},
]
}
];

之後會在前端用三個ngFor將itemList的每個項目長出input,想用react forms一次收值,
不知道要怎麼使用,有看過動態新增form的,但他是用ngFor用在formArray上,好像不太一樣,
因為我的input是依照dataList長的,不是依照form.controls長。

html:

畫面的樣子
2018-5-24%20%E4%B8%8B%E5%8D%88%2009-25-14

ReactiveForm 裡面,FormGroup/FormControl/FormArray 的結構就會相對應到資料結構
所以不如換個方式思考,先用資料組出 FormGroup ,然後再到畫面上去畫出來

1個讚

哦哦 ! 原來是這樣,難怪動態表單也是ngFor form的東西,那我再試試看! 謝謝~~