介绍
ontimize-web-ng2-dynamicform是一个专为Angular应用程序开发而设计的npm包。它基于Ontimize Web框架，该框架旨在提供开发人员一个强大的工具包，以便他们能够更快速地创建复杂的企业级应用程序。ontimize-web-ng2-dynamicform是ontimize-web-ng2的一部分，它为您提供了一个动态表单生成器，用于帮助创建动态表单，它可以自动响应与数据模型的更改。
安装
为了安装ontimize-web-ng2-dynamicform，您需要使用npm。下面是如何安装它：
npm install ontimize-web-ng2-dynamicform --save
基本用法
如果你已经安装了ontimize-web-ng2-dynamicform，那么你只需要在你的应用程序中导入DynamicFormModule模块，像这样：
-- -------------------- ---- -------
------ - ----------------- - ---- -------------------------------
-----------
-------- -
---
------------------
---
-
--
------ ----- -------- - -现在，您可以在您的组件的HTML中渲染动态Form组件，如下所示：
<ontimize-dynamic-form [visibleColumns]="['id', 'name', 'age']" [data]="data" (onSubmit)="submitForm($event)"> </ontimize-dynamic-form>
上面Code片段中的ontimize-dynamic-form组件会自动渲染动态表单，而与ontimize-web-ng2-dynamicform的其他部分则帮助您自定义如何呈现表单和支持数据绑定。
指令
OntimizeDynamicForm可配置的指令：
visibleColumns输入
一个字符串数组，指定要呈现的列。
<ontimize-dynamic-form [visibleColumns]="['id', 'name', 'age']"></ontimize-dynamic-form>
当您希望在表单中显示少量的指定字段时，这非常有用。
data输入
一个JavaScript对象，用于处理表单的数据绑定。数据必须是标准的JSON对象。此属性是必需的。
<ontimize-dynamic-form [data]="myDataObject"></ontimize-dynamic-form>
当您需要更多的控制并需要在表单中渲染一个特定的数据集时使用。
formGroup属性
一个Angular FormGroup对象，生成动态表单组件。
<ontimize-dynamic-form [formGroup]="myFormGroup"></ontimize-dynamic-form>
此属性可用于显式地设置表单组以供您进一步控制表单转发并检查表单有效性时使用。
事件
OntimizeDynamicForm组件发出以下事件:
onSubmit事件
这个事件在提交表单时发出。
<ontimize-dynamic-form (onSubmit)="submitForm($event)"></ontimize-dynamic-form>
您可以通过将this.data作为参数传递给submitForm方法来处理表单数据。注意要预防事件中断事件传递。
丰富的动态表单
OntimizeDynamicForm组件支持附加标准Angular表单组件或组件组，以更改动态表单的行为。例如，在表单中使用单选按钮或一个小型日期选择器等。
ngModel表单绑定
-- -------------------- ---- -------
---------------------- ----------------------------
------
-----------
-------------------------------
-----------
------------ -----
-----------------------
-----------------------------------
-------------------
------------------------ngModel绑定可以用于任何标准Angular表单输入，并且是一个方便的方式来捕获表单数据。
mat-datepicker [可选]
如上所述，在您的动态表单中使用Angular Material的mat-datepicker。
<ontimize-dynamic-form [visibleColumns]="['dob']">
<mat-form-field>
<input matInput [matDatepicker]="dob" placeholder="Date of birth">
<mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle>
<mat-datepicker #dob></mat-datepicker>
</mat-form-field>
</ontimize-dynamic-form>这个小型日期选择器可以在您的动态表单中轻松添加一个可视日期选择器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de218