ng-dynamic-forms源码分析

在两个开源项目中，ng-dynamic-forms的源码相较于form.io，比较简单，所以我还勉强能看懂，下面就我自己的理解进行简单分析，若有不对的地方，请大家多多指正。

整体结构分析

ng-dynamic-forms的主要代码均分布在packages文件夹下，其中的Core是各种控件的抽象，其他的文件夹是各个UI框架的具体封装，每个文件夹都是一个可独立编译运行的项目。

Core文件夹内容分析

Core文件夹做的事情，基本上是对于各种组件、布局的抽象，说简单点，就是定义了，这个框架有哪些组件，这些组件都有哪些事件、哪些方法。接下来我们具体分析一下：

utils文件夹：

这个文件夹最不重要，是一些工具类的封装，无需多解释

component/dynamic-form-component文件：

这个文件定义了表单（<form></form>）的抽象类DynamicFormComponent，也就是一组表单控件的集合，将来每种UI库的都会有该类的子类，并根据需要重写其中的一些方法和属性。

它实现了一些基础的事件和属性。

事件：blur，change，focus，customerEvent

属性：formGroup、formModel、formLayout

component/dynamic-form-control.component文件：

这个文件定义了表单的表单元素的抽象类DynamicFormControlComponent，将来每个UI控件的具体类，都要继承自该类，并更新需要进行重写和扩展。

该类具有以下事件和属性：

事件：onControlValueChanges，onModelValueUpdates，onModelDisabledUpdates，onValueChange，onBlur，onFocus，onCustomEvent

属性：errorMessages，showHint，hasList，isInvalid，isValid，showErrorMessages，templateList

decorator/serializable.decorator文件：

定义了一个公共的装饰器，用于方便传入Key-Value形式的属性。

model文件夹：

model文件夹是整个Core文件夹中，比较重要的一块，他定义了动态表单所支持的表单元素的和一些表单包裹元素。

总体来说，ng-dynamic-forms将控件分为如下几类：

输入类：文本框，文本域，富文本编辑框

单值类：包含所有的输入类、选择类控件，另外还有颜色选择器、日期选择、文件选择组件、评分组件、滑动组件

选择类：复选框（CheckBox）、开关（Switch）

选项类：下拉框、单选框

日期类：日期选择组件、时间选择组件

文件类：文件上传组件

布局类：FormGroup、FormArrary

原文地址：https://www.cnblogs.com/baiyunchen/p/8469665.html