先上代码:,引用app-dynamic-form组件
<ng-container *ngFor="let tab of emergencyArr">
<div class="container-fluid product-info" *ngIf="!tab.componentName">
<div class="row form-customer">
<app-dynamic-form #emergencyInfo [config]="tab[tab.model]" [model]="item"
[modelTit]="{title:tab.title,id:tab.model}" class="{{'displayCon'}}" id={{tab.model}}>
</app-dynamic-form>
</div>
</div>
</ng-container>
我们通过ng-container包裹循环一个数组(如果是一个组件则不需要循环,因为我的这个组件是多个所以循环展示)
通过componentName来拿到组件名称,有组件名再向动态组件中传入config、model、modelTit。详细在前几篇。
如果我们想在动态表单中插入一块非动态表单的区域,例如
我们将动态表单的顺序通过名称循环判断的方式导出,如果componentName为此才显示此模块,具体还需要结合数据库结构来用,数据库结构见下方
<!-- 二手车评估查询 -->
<div class="container-fluid product-info"
*ngIf="tab.componentName==='usedCarQuery'&&showQuery&&(status === 5 || status === 7 || status === 9)">
<app-usercar-query #usercarquery [(finEntity)]="finEntity"></app-usercar-query>
</div>
我们来看一下接口返回的数据
data是返回的JSON,我们通过JSON.parse转换的数据为第二部分
数据库结构:
数据库中有两个表组成了动态表单,dynamic_form为父表,dynamic_form_detail为子表,
上图中,所有内容成为一个小组件,组件包含标题和内容两部分。很多个这样的小组件组合起来叫做一个模块。
父表结构
1、id: 父表的id是自增的,但是我们会通过父表的id与子表的dynamic结合,让父子表相关联
2、clientId:我们通过clientId来区分客户,如果系统针对一家客户 那此处都相同
3、title: 组件标题,通过上面图片可以看出,组件由标题和当中字段两部分组成,上面说的组件通过标题和每个字段共同组成,标题可以让我们控制组件的位置
4、Model: 外层实体名称
5、IsComponent 是否是自定义组件,自定义组件只需要展示标题,内容是自定义的逻辑
6、**componentName:**定义模块名称 可用来做一些判断
7、ModelOrder: 组件顺序,通过123456排序(后台来做处理)来定义组件的顺序,方便展示
8、ModelGroup: 模块组,此小组件所在的模块对应的数字,比如:一个tab页中有三个小组件,那这三个小组件都为1,排序由ModelOrder决定,而下一个tab页中的小组件可能ModelGroup就为2
9、HideStatusIDs: 隐藏的节点,因为我的这个例子是用在一个大量工作流的项目中,所以定义了一些节点某些模块整个是隐藏的
10、 **ComponentType:**实体格式,此字段用来做特殊处理判断,如果其他项目中还需要一些其他的字段,可以自行增加一列另外的用途
子表结构
1、Id 自增标识
2、DynamicId 关联父表的ID 从而确定是哪个模块下的
3、label 此字段的名称
4、Field 此字段的字段名
5、Type: 选择框类型,例:input、Date、Radio、Select
6、IsDisabled: 是否制度,如果为1则此字段永远只读不可填
7、IsRequired 是否必填
8、Options: 此字段为select框的字段,通过这个字段来从字典表获取数据
9、Unit:单位、例如 元、米、元
10、pattern 正则提示,例如 请输入0-10位的数字
11、RegExp :正则
12、Placeholder: 背景
13、col : 占Bootstrap多少格
14、ReadonlyStatusIDs: 因为此例是对应工作流节点的,所以在某些节点此字段是只读
15、minView: appDatepicker日期组件最小选择的视图
16、StartView: appDatepicker日期组件开始的视图
17、FieldOrder : 字段顺序,组件中有很多个字段,进行排序
18、IsComponent:是否是自定义组件
19、Bold: 非必需,特殊用来做加粗的
如果还有其他的特殊处理,可以定义一列出来做特殊处理。
总结
首先,我只是一个小喽喽,才学尚浅,对于动态表单的整理我只是单纯的解析出来了,在此阶段我理解的动态表单核心是将表单展现到页面中,视图与逻辑相分离,动态表单单纯展现视图,而不带有数据的处理,它与正常的表单应该一样,它对应的逻辑是单独拎出来的。
另外,如果整理的有任何问题或者有更好的方式,请帮忙提出来我们一起探讨,如果喜欢请点一个赞,您小小的支持可能就是我巨大的动力。