大型动态表单实例整合 angular7 4-具体应用与数据库配置 与总结

先上代码：，引用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: 非必需，特殊用来做加粗的
如果还有其他的特殊处理，可以定义一列出来做特殊处理。

总结

首先，我只是一个小喽喽，才学尚浅，对于动态表单的整理我只是单纯的解析出来了，在此阶段我理解的动态表单核心是将表单展现到页面中，视图与逻辑相分离，动态表单单纯展现视图，而不带有数据的处理，它与正常的表单应该一样，它对应的逻辑是单独拎出来的。
另外，如果整理的有任何问题或者有更好的方式，请帮忙提出来我们一起探讨，如果喜欢请点一个赞，您小小的支持可能就是我巨大的动力。