这个需求跟正常的表单不太一样，这个表单基本上除了几个写死固定的表单项以外，其他的数据均为动态生成的，需求大体上就是一个复选框组，用户可以通过选中不同的复选框，下面生成一个对应的表单，表单中一部分的字段是由后台那边动态返回的。
图一.png
图二.png
下面来说下大体上的思路，组件库使用的NG-ZORRO组件
- 完整的HTML部分：
image.png
ts代码部分：
1、表单初始化：
ngOnInit() {
this.form = this.fb.group({
scenesTemplateName: [null, [Validators.required]],
desc: [null, [Validators.required]],
aiType: [null, [Validators.required]],
scenesTaskInfoList: this.fb.array([]),
});
this.qryAreaInfo();
}
get scenesTaskInfoList(): FormArray {
return this.form.controls.scenesTaskInfoList as FormArray;
}
2、查询aiType存储到本地会话
// 查询AI类型
qryAreaInfo() {
const params = {};
this.service.qryAIType(params).subscribe((data) => {
this.aiType = data.retList.map((e) => {
return {
value: e.typeID,
label: e.typeName,
subItem: e.subItem,
checked: false,
bussinessParamsFormat: e.bussinessParamsFormat,
};
});
sessionStorage.setItem('aiType',JSON.stringify(this.aiType));
this.form = this.fb.group({
aiType: [this.aiType, [Validators.required]],
});
});
}
3、选择aiType的处理
// 复选框选择事件
onSelect(query: any): void {
const arr = [];
let item = null;
const _that = this;
this.temp = JSON.parse(sessionStorage.getItem('aiType'));
query.forEach((el)=>{
this.temp.forEach(data=>{
if(el.value === data.value){
if(el.checked !== data.checked){
item = el;
}
}
})
})
this.options.length === 0 ? this.add(this.options, item) : (function() {
if (_that.options.includes(item)) {
arr.push(item.value);
_that.options = _that.options.filter(
(el) => !arr.includes(el.typeID)
);
const key = (function() {
let i;
_that.scenesTaskInfoList.controls.forEach((e, index) => {
if (e.value["aiType"] === item.value) {
i = index;
}
});
return i;
})();
_that.del(key);
} else {
_that.add(_that.options, item);
}
})();
sessionStorage.setItem('aiType',JSON.stringify(this.aiType));
}
4、取消选中的处理
del(i: number) {
this.scenesTaskInfoList.removeAt(i);
this.options = this.options.filter((e)=> e.checked )
}
5、新增的处理
add(arr: Array, query: any) {
arr.push(query);
this.scenesTaskInfoList.push(this.createGroup(query));
}
6、动态的创建FormGroup
createGroup(query: any): FormGroup {
const group = this.fb.group({
aiType: [query.value],
aiFps: [null, [Validators.required]],
timeThreshold: [null, [Validators.required]],
subItemNo: [null, [Validators.required]],
});
for(let i = 0; i < query.bussinessParamsFormat.length; i++){
group.addControl(query.bussinessParamsFormat[i].name,new FormControl());
}
return group;
}
7、根据后台的数据格式重构ES6的entries方法
entries(obj) {
let arr = [] , temp = [];
let map = {};
let data = Object.keys(obj).filter((key) => {
if(!['subItemNo','timeThreshold','aiFps','id','aiType'].includes(key)){
return arr.push(key)
}
});
for (let key of data) {
map[key] = obj[key];
}
temp.push(map)
return temp;
}
8、提交多个动态表单的数据
// 提交
submit() {
let detailList = [];
detailList = this.scenesTaskInfoList.value.map(e=>{
return {
aiType: e.aiType,
aiFps: e.aiFps,
timeThreshold: e.timeThreshold,
subItem: e.subItemNo,
bussinessParam: JSON.stringify(this.entries(e))
}
})
const form = {
scenesTemplateName: this.form.value.scenesTemplateName,
desc:this.form.value.desc,
detailList:detailList
}
console.log(form);
Object.keys(this.form.controls).forEach((key) => {
this.form.controls[key].markAsDirty();
this.form.controls[key].updateValueAndValidity();
});
this.service.addTemplate(form).subscribe((data) => {
this.message.success('添加成功', { nzDuration: 1000 });
});
if (this.form.invalid) {
return;
}
}
表单提交的数据格式：
数据格式.png
具体的数据格式需要根据自己的后端开发来