总组件

首先是动态模版的最外层组件dynamic-form

首先来看模版HTML

<ng-container *ngFor="let field of config"><ng-container dynamicField [config]="field" [group]="form" *ngIf="!field.isComponent" [model]="model"></ng-container><app-multi-linkage *ngIf="field.type==='Class'" class="displayCon ngSelect" [isDetail]="field.isDisabled"[linkageArray]="regionEntity[field.field]" [(attachModel)]="model"></app-multi-linkage><app-region-linkage class="displayCon " [isDetail]="field.isDisabled" *ngIf="field.type==='Region'"[linkageArray]="getOptions(field.field,field.label)" [(attachModel)]="model"></app-region-linkage>
</ng-container>

组件分为三部分：
外层使用ng-container包裹 使用config循环出config这个对象的配置（字段配置）
1、ng-container 包裹的 添加上 dynamicField指令，是真正的动态表单， 指令中三个@input分别接收config\group\model在分别存储着自定义字段配置、表单formgroup配置、所在实体全部字段
注意：这里有一个*ngIf 来判断是否是自定义组件，也就是isComponent为0时不是自定义组件，此字段用来区分动态表单还是一些需要自己写的特殊字段例如下面的三级下拉等。
2、app-mlti-linkage 自定义三级下拉组件 可以自己写 我这个仅供参考

<div class="col-md-4 search-body-col ngSelect" *ngFor="let item of linkageArray ;let i=index;"><label for="" class="s-row-col_label"><span class="text-danger">*</span>{{item.label}}</label><div class="select-filter"><ng-select [disabled]="isDetail" class="disct_select" [options]="item.options" [(ngModel)]="attachModel[item.model]"[noFilter]="10" notFoundMsg="暂无数据" (selected)="selected($event,i)" placeholder="请选择"></ng-select></div>
</div>

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { CommonService } from '../../services/common.service';
@Component({selector: 'app-multi-linkage',templateUrl: './multi-linkage.component.html',styleUrls: ['./multi-linkage.component.scss']
})
export class MultiLinkageComponent implements OnInit {@Input() isDetail: boolean = false;@Input() linkageArray: any;@Input() attachModel: any;@Output() attachModelChange = new EventEmitter();@Input() isIdentity: boolean = false;constructor(private commonService: CommonService) { }ngOnInit() {// 各个字段赋值this.linkageArray.forEach((item: any) => {item.value = this.attachModel[item.model];item.attachValue = this.attachModel[item.attachField];});if (this.isIdentity) {this.commonService.getIdentityCenter().subscribe(response => {if (response) {this.getFirstOptions();}});} else {this.getFirstOptions();}}// 获取一级下拉选项getFirstOptions() {this.commonService[this.linkageArray[0].service]().subscribe((res: any) => {const options = new Array();res.data.forEach((e: any) => {options.push({label: e.content,value: e.code,});});options.unshift({label: '请选择',value: '',});this.linkageArray[0].options = options;// 绑定if (this.linkageArray[0].value) {const option = {value: this.linkageArray[0].value,label: this.linkageArray[0].attachValue,};this.selected(option, 0, true);}});}// 选中事件selected(option: any, index: any, clear?: boolean) {const activeItem = this.linkageArray[index];const nextItem = this.linkageArray[index + 1];this.attachModel[activeItem.attachField] = option.label;// 手动点击选中时清空下级选项if (!clear) {this.linkageArray.forEach((e: any, i: any) => {if (i > index) {e.value = '';e.attachValue = '';this.attachModel[e.model] = '';this.attachModel[e.attachField] = '';e.options = [];}});if (option.label === '请选择') {return;}}if (nextItem) {this.commonService[nextItem.service](option.value).subscribe((res: any) => {const options = new Array();res.data.forEach((e: any) => {options.push({label: e.content,value: e.code,});});options.unshift({label: '请选择',value: '',});nextItem.options = options;if (nextItem.value) {const nextOption = {value: nextItem.value,label: nextItem.attachValue,};this.selected(nextOption, index + 1, true);}});}}
}

这里的的组件 是绑定value、lable的下拉，接口是一级下拉一个接口，二三级下拉一个接口，自定义组件建议还是自己写吧，这里不做赘述了。
3、app-region-linkage是另一个三级下拉 具体也不做赘述了
注意：我们通过type来区分自定义组件用哪个

再来看其ts文件中：

import { Component, OnInit, Input, Output, ChangeDetectorRef, OnChanges } from '@angular/core';
import { FieldConfig } from '../models/field-config.interface';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { PublicService } from '../../shared/services/public.service';
import { Logger, LoggerFactory } from '@app/core';
import { Constant } from '../../shared/components/common-constant';
@Component({exportAs: 'dynamicForm',selector: 'app-dynamic-form',templateUrl: './dynamic-form.component.html',styleUrls: ['./dynamic-form.component.css']
})export class DynamicFormComponent implements OnChanges, OnInit {[x: string]: any;@Input()config: FieldConfig[] = [];@Input() model: any;@Input() modelTit: any;log: Logger;form: FormGroup;dictionary: any = [];vehicleArray = Constant.GetIndex().vehicleArray;regionEntity = {collateclass: Constant.GetIndex().classArray,};constructor(private changeRef: ChangeDetectorRef) {}ngOnInit() {this.buildForm();// console.log(this.config);}ngOnChanges() {}setValue(name: string, value: any) {this.form.controls[name].setValue(value, { emitEvent: true });}// 省市区optionsgetOptions(field: any, label: any) {return [{model: field + 'procode', attachField: field + 'pro',label: label + '省份', service: 'getTop'},{model: field + 'citycode', attachField: field + 'city',label: label + '城市', service: 'getDistricts'},{model: field + 'countycode', attachField: field + 'county',label: label + '县(区)', service: 'getDistricts'}];}buildForm() {const vaildObj = {};this.config.forEach((e: any) => {if (!e.isComponent) {vaildObj[e.field] = e.isRequired ? new FormControl(e.value || null,[Validators.required, Validators.pattern(new RegExp(e.regExp))]): new FormControl(e.value || '', [Validators.pattern(new RegExp(e.regExp))]);}});this.form = new FormGroup(vaildObj);this.changeRef.detectChanges();}
}

解析：
1、[x: string]: any; // typescript语法当不确定接口中有多少属性的时候，可以用索引签名。代表当用任意字符串来所以本组件中的属性时都会得到any的东西，这里是在外部引用组件内部的this.emergencyInfo._results时用到的，避免报错。
2、config:字段配置
3、model:字段的外层实体，包含着实体和实体下的所有字段
4、modelTit：模块标题，用模块标题来进行提示，例如：xx模块下的xx字段不正确，请检查
5、vehicleArray和regionEntity都只是单独的需求引入，有特殊下拉需求的可以单独修改，不用可以忽略掉
例如 这里的vehicleArray是一个数组

  public vehicleArray: Array<any> = [{model: 'brandId', attachField: 'brandName',label: '品牌', service: 'getBrand'},{model: 'childBrandId', attachField: 'childBrandName',label: '子品牌', service: 'getBrandChilden'},{model: 'seriesId', attachField: 'seriesName',label: '车系', service: 'getBrandChilden'},{model: 'modelId', attachField: 'modelName',label: '车型', service: 'getVehicles'}];

此组件的关键在于表单验证：

	const vaildObj = {};this.config.forEach((e: any) => { if (!e.isComponent) { vaildObj[e.field] = e.isRequired ? new FormControl(e.value || null,[Validators.required, Validators.pattern(new RegExp(e.regExp))]): new FormControl(e.value || '', [Validators.pattern(new RegExp(e.regExp))]);}});this.form = new FormGroup(vaildObj);this.changeRef.detectChanges();

循环字段配置表对象
排除用来判断是否是自定义组件的属性isComponent
定义的空对象vaildObj添加e.field(字段名)，如果isRequired为1，则字段必填，添加必填校验
e.value为其默认值，如果非必填则添加正则，不加必填校验。
实例化vaildObj

** ChangeDetectorRef 是组件的变化检测器的引用:

export abstract class ChangeDetectorRef {
　　abstract markForCheck(): void;
　　abstract detach(): void;
　　abstract detectChanges(): void;
　　abstract reattach(): void;
}
markForCheck() - 当输入已更改或视图中发生了事件时，组件通常会标记为脏的（需要重新渲染）。调用此方法会确保即使那些触发器没有被触发，也仍然检查该组件。
在组件的 metadata 中如果设置了 changeDetection: ChangeDetectionStrategy.OnPush 条件，那么变化检测不会再次执行，除非手动调用该方法。
detach() - 从变化检测树中分离变化检测器，该组件的变化检测器将不再执行变化检测，除非手动调用 reattach() 方法。
reattach() - 重新添加已分离的变化检测器，使得该组件及其子组件都能执行变化检测
detectChanges() - 从该组件到各个子组件执行一次变化检测 检查该视图及其子视图。与 detach 结合使用可以实现局部变更检测。

具体小组件模版

选择几个典型的进行整理：

1、form-input 普通input框 单文件 form-input.component.ts

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Field } from '../../models/field.interface';
import { FieldConfig } from '../../models/field-config.interface';@Component({selector: 'form-input',styles: [':host{display: contents}'], // 让子元素拥有和父元素一样的布局方式styleUrls: ['form-input.component.scss'], template: `<div class="{{'search-body-col col-md-'+config.col}}" [formGroup]="group"><label for="" class="s-row-col_label"><span class="text-danger" *ngIf="config.isRequired">*</span>{{config.label}}</label><div class="flex-input"><input [(ngModel)]="model[config.field]" formControlName={{config.field}} [appDisabled]="config.isDisabled"name={{config.label}} type="text" class="form-control s-row-col_input" placeholder={{config.placeholder}} /><span class="text-mid" >{{config.unit}}</span><zr-validation-message [control]="group.controls[config.field]" label={{config.label}}[validationMessages]="{pattern:config.pattern}"></zr-validation-message></div>
</div>`
})
export class FormInputComponent implements Field {config: FieldConfig;group: FormGroup;model: any;
}

解析：
1、模版中div用的formGroup包裹以便我们使用angular的表单，布局使用bootstrap的栅格，加入我们用的config.col配置，我们在数据库中的col列写入1-12来控制这个input所占的布局
2、label通过数据库中的isRequired字段判断*星号是否展示，来判断这个是否是必填项
3、input上的
ngModel 绑定的是model（外层实体）中的config.field（字段名），
formControlName来记录必填校验的字段名，
[appDisable] 是一个自定义的字段是否只读的指令 也是数据库中配置isDisabled关联的，
name 用来为我们用来判断此字段名称的用途 (我这里是用此来提示：{{name}}字段未填，请检查)
config.unit：绑定了字段的单位 例如：元、公里、时
zr-validation-message 配合表单验证使用，config.pattern来提示具体正则校验规则

日期选择框

import { Component, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Field } from '../../models/field.interface';
import { FieldConfig } from '../../models/field-config.interface';
@Component({selector: 'form-date',styleUrls: ['form-date.component.scss'],styles: [':host{display: contents}'],template: `<div class="{{'search-body-col col-md-'+config.col}}" [formGroup]="group"><label for="" class="s-row-col_label"><span class="text-danger" *ngIf="config.isRequired">*</span>{{config.label}}</label><div class="flex-input"><input class="form-control" [appDisabled]="config.isDisabled" type="text" [id]="config.field" appDatepicker[clearBtn]="true" [format]="format" [startView]="config.startView" [minView]="config.minView"[(ngModel)]="model[config.field]" [formControlName]="config.field" placeholder={{config.placeholder}}[isIcon]="true" readonly name={{config.label}} /><zr-validation-message [control]="group.controls[config.field]" label={{config.label}}[validationMessages]="{pattern:config.pattern}"></zr-validation-message></div>
</div>`
})export class FormDateComponent implements Field, OnInit {config: FieldConfig;group: FormGroup;model: any;format = 'yyyy-mm-dd';ngOnInit() {if (this.config.minView === 3) {this.format = 'yyyy-mm';}}}

简单解析：
日期选择框使用的是 appDatepicker指令，网上可以查询到
clearBtn 定义了有清除按钮
format 定义了日期格式
startView和minView 定义了日期的视图，开始视图和最小时图，这里两个字段放在数据库中动态控制