简介
ontimize-web-ng2-dynamicform-builder 是一个基于 Angular 2 和 OntimizeWeb 的动态表单构建器。通过该包，我们可以轻松地创建自定义表单，从而提高前端开发的效率。
OntimizeWeb 是一个基于 Angular 2 和 Ontimize 的 Web 客户端框架，Ontimize 则是一个基于 AngularJS 和 TypeScript 的企业级应用开发框架。
OntimizeWeb-ng2-dynamicform-builder 利用 OntimizeWeb 框架的功能，实现了动态表单生成，让前端开发者无需编写复杂的 HTML/CSS/JavaScript 代码，即可轻松创建所需的表单。
安装
要使用 ontimize-web-ng2-dynamicform-builder，我们首先需要在本地安装：
npm i ontimize-web-ng2-dynamicform-builder --save
创建表单
在安装了 ontimize-web-ng2-dynamicform-builder 之后，我们就可以开始创建自定义表单了。
首先，需要在我们的组件中导入所需的库：
import { DynamicFormBuilder, DynamicFormControlModel } from 'ontimize-web-ng2-dynamicform-builder';接下来，需要实例化 DynamicFormBuilder 类，并使用它来生成表单控件：
formModel: DynamicFormControlModel[] = [];
constructor(private formBuilder: DynamicFormBuilder) { }
ngOnInit() {
this.formModel = this.formBuilder.createFormGroup([{ controlName: 'name' }, { controlName: 'email' }, { controlName: 'phone' }]);
}在上述代码中，我们首先创建了一个空的 formModel 数组来保存表单模型。接着在 ngOnInit 方法中，使用 DynamicFormBuilder 的 createFormGroup 方法，定义了一个名为 name、email、phone 的表单。createFormGroup 方法的参数是一个 FormControlOptions 数组，该数组指定了表单的结构、格式和输入规则。
最后，我们将表单模型保存在 formModel 中。
在页面中显示表单
表单模型创建完成后，我们就可以将表单显示到页面中，让用户可以在浏览器中填写相关信息了。
在 Angular 2 中，我们可以使用 ng2-dynamic-forms 库中的 DynamicFormComponent 来显示动态表单。该组件能够自动生成表单，并将表单数据提交到后端服务器进行处理。
要使用 DynamicFormComponent，我们只需要把我们在上面生成的 formModel 模型传递给 DynamicFormComponent 组件即可：
<ng-dynamic-form [model]="formModel"></ng-dynamic-form>
示例代码
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------------- ----------------------- - ---- ---------------------------------------
------------
--------- -----------
--------- -
---------------- --------------------------------------
-
--
------ ----- ------------- ---------- ------ -
---------- ------------------------- - ---
------------------- ------------ ------------------- - -
---------- -
-------------- - ----------------------------------- ------------ ------ -- - ------------ ------- -- - ------------ ------- ----
-
-结论
如果你想要提高前端开发的效率，ontimize-web-ng2-dynamicform-builder 是一个不错的选择。使用该包，我们可以轻松地创建各种自定义表单，不需要编写复杂的 HTML/CSS/JavaScript 代码。
阅读本文后，你应该已经了解了如何安装 ontimize-web-ng2-dynamicform-builder，并使用它来生成动态表单。将该包应用到实际项目开发中，能够大大提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de219