angular-formly简介

angular-formly 1 是 Angular (1.x)的表单构建库,因为工作我用到了这个库,觉得很有意思,写出来分享。本文首先尝试对这个库做简单的介绍。全文按三个问题组织。

问题一:为什么作者会写这个库?

其实,这个问题得问作者(请自行到github和项目主页去查)。但另一个类似的问题我就好回答了,为什么我找到并使用了这个库?最开始用angular构建表单的时候,我尝试了三种方法:

  • 手写每个表单域

  • ng-repeat

  • ngbs-forms

第一种方法是简单粗暴的,当需要填空的内容不多的时候,还过得去。但内容一多,就发现了大量模板重复,违背了DRY哲学。于是,尝试了第二种方法(ng-repeat), 但由于不同的输入类型需要不同的元素和布局,导致模板特别难读和维护。新项目的时候再Google,发现了 ngbs-forms 2 这个库,把它集成到编译步骤中去, 立刻发现轻松很多。然而, ngbs-forms 编译时生成表单也是它的一个弱点:只能生成静态表单,而一个项目的实际状况是要根据不同的模板生成动态表单,ngbs-forms不好用了, 于是再找,发现并用上了 angular-formly 。

问题二:这个库有什么特点?我认为主要有两个:

  • JS配置动态表单

  • 模板中立

第一,JS配置动态表单展现,这绝对是关键特性,可以满足运行时动态构建表达项的需求,大大减少了模板重复,并且很容易修改。

第二,模板中立,除了自带的Bootstrap模板,纯HTML模板,Material Design模板,ionic模板,还允许第三方作者构建其他库的模板,并支持单个域个性化的模板。

问题三: 如何学习angular-formly?

首先,官网中有很多例子,可以拷贝和学习。例如从这个 入门例子 中, 很容易学到如何使用formly。

其次,如果想系统的了解和使用这个库,建议看这个 视频课程系列 :

1

http://angular-formly.com/

2

https://github.com/ernestoalejo/ngbs-forms