这个需求跟正常的表单不太一样，这个表单基本上除了几个写死固定的表单项以外，其他的数据均为动态生成的，需求大体上就是一个复选框组，用户可以通过选中不同的复选框，下面生成一个对应的表单，表单中一部分的字段是由后台那边动态返回的。
图一.png
图二.png
下面来说下大体上的思路，组件库使用的NG-ZORRO组件
- 完整的HTML部分：
<form nz-form [formGroup]="form" [nzLayout]="'vertical'">
<nz-card class="sceneCard" [nzBordered]="false" nzTitle="场景定义" style="background: #fff;">
<div nz-row nzGutter="16">
<div class="sceneItem" nz-col [nzXl]="{ span: 10, offset: 8 }" [nzLg]="{ span: 10 }" [nzMd]="{ span: 12 }"
nzSm="24">
<nz-form-item>
<nz-form-label nzFor="scenesTemplateName" nzRequired>
场景名称
</nz-form-label>
<nz-form-control nzErrorTip="请输入场景名称">
<input nz-input formControlName="scenesTemplateName" [id]="'scenesTemplateName'" placeholder="请输入场景名称" />
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="16">
<div class="sceneItem" nz-col [nzXl]="{ span: 10, offset: 8 }" [nzLg]="{ span: 10 }" [nzMd]="{ span: 12 }"
nzSm="24">
<nz-form-item>
<nz-form-label nzFor="desc" nzRequired>
场景描述
</nz-form-label>
<nz-form-control nzErrorTip="请输入场景描述">
<textarea rows="2" nz-input formControlName="desc" [id]="'desc'" placeholder="请输入场景描述"></textarea>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="16">
<div class="sceneItem" nz-col [nzXl]="{ span: 10, offset: 8 }" [nzLg]="{ span: 10 }" [nzMd]="{ span: 12 }"
nzSm="24">
<nz-form-item>
<nz-form-label nzFor="typeID" nzRequired>
AI类型
</nz-form-label>
<nz-form-control>
<nz-checkbox-group formControlName="aiType" (ngModelChange)="onSelect(aiType)"></nz-checkbox-group>
</nz-form-control>
</nz-form-item>
</div>
</div>
</nz-card>
<nz-card class="setOption" [nzBordered]="false" nzTitle="参数配置" [nzExtra]="extra" style="background: #fff;">
<div class="card-container">
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" >
<nz-tab [nzTitle]="item.label" *ngFor="let item of options;let key = index;" >
<form [formGroup]="form" se-container>
<div formArrayName="scenesTaskInfoList">
<div class="scenesTaskInfoList" *ngFor="let control of scenesTaskInfoList.controls;let i = index;">
<div *ngIf="item.value == control.value.aiType" [formGroupName]="i">
<!-- 静态项 -->
<div nz-row nzGutter="16">
<div class="sceneItem" nz-col [nzXl]="{ span: 10, offset: 8 }" [nzLg]="{ span: 10 }"
[nzMd]="{ span: 12 }" nzSm="24">
<nz-form-item>
<nz-form-label nzFor="subItemNo" nzRequired>
监测子项
</nz-form-label>
<nz-form-control>
<nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择监测子项"
formControlName="subItemNo">
<nz-option *ngFor="let el of item.subItem" [nzLabel]="el.name" [nzValue]="el.no">
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="16">
<div class="sceneItem" nz-col [nzXl]="{ span: 10, offset: 8 }" [nzLg]="{ span: 10 }"
[nzMd]="{ span: 12 }" nzSm="24">
<nz-form-item>
<nz-form-label nzFor="timeThreshold" nzRequired>
时间阈值
</nz-form-label>
<nz-form-control>
<input nz-input formControlName="timeThreshold" [id]="'timeThreshold'" placeholder="请输入时间阈值" />
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="16">
<div class="sceneItem" nz-col [nzXl]="{ span: 10, offset: 8 }" [nzLg]="{ span: 10 }"
[nzMd]="{ span: 12 }" nzSm="24">
<nz-form-item>
<nz-form-label nzFor="aiFps" nzRequired>
监控间隔
</nz-form-label>
<nz-form-control>
<input nz-input formControlName="aiFps" [id]="'aiFps'" placeholder="请输入监控间隔" />
</nz-form-control>
</nz-form-item>
</div>
</div>
<!-- 动态项 -->
<div nz-row nzGutter="16" *ngFor="let e of item.bussinessParamsFormat">
<div class="sceneItem" nz-col [nzXl]="{ span: 10, offset: 8 }" [nzLg]="{ span: 10 }"
[nzMd]="{ span: 12 }" nzSm="24">
<nz-form-item>
<nz-form-label [nzFor]="e.name" nzRequired>
{{e.name}}
</nz-form-label>
<nz-form-control>
<input nz-input *ngIf="e.type === 'string'" [formControlName]="e.name" [id]="e.name" [placeholder]="'请输入'+e.name" />
<nz-input-number *ngIf="e.type === 'number'" [formControlName]="e.name" [id]="e.name" [nzMin]="1" [nzStep]="1"></nz-input-number>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
</div>
</div>
</form>
</nz-tab>
</nz-tabset>
</div>
</nz-card>
<div nz-row style="display:flex;justify-content:center;padding-top: 16px">
<div nz-col style="text-align: center">
<button nz-button [nzSize]="'default'" [nzType]="'primary'"
[nzLoading]="loading" style="width: 100%" (click)="submit()">立即创建
</button>
</div>
<div nz-col style="text-align: center">
<button nz-button [nzSize]="'default'" (click)="nzModal.close()" [nzType]="'primary'" [nzLoading]="loading"
style="width: 100%;margin-left: 15px;" >取消
</button>
</div>
</div>
</form>
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<any>, 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
具体的数据格式需要根据自己的后端开发来
