介绍
ng2-jsform 是一个 Angular2 的自动表单生成器。它基于 json schema 生成表单，并且支持自定义模板。
安装
使用 npm 安装 ng2-jsform：
npm install ng2-jsform --save
使用
导入模块
在你的 NgModule 中导入 Ng2JsFormModule：
import { Ng2JsFormModule } from 'ng2-jsform';
@NgModule({
imports: [
Ng2JsFormModule
]
})在组件中使用
在 HTML 模板中使用
在你的组件的 HTML 模板中，使用 <ng2-jsform> 标签：
<ng2-jsform [schema]="schema" [data]="data" (onSubmit)="onSubmit($event)" ></ng2-jsform>
在组件中使用 TypeScript
ng2-jsform 提供了 JsForm 类，你可以使用它在你的组件中手动创建表单：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------ - ---- -------------
------------
--------- ----------
--------- -
---- -------------------
------- ------------------------------
-
--
------ ----- --------------- ---------- ------ -
------- ------- -------
----------- ---- -
----------- - --- --------
-------- -------------------------------
------- -------
----- -----
--------- ------- -- -
-------------------
-
---
-
--------- ---- -
---------------------
-
-这里的 schema 和 data 是相应的表单数据结构和数据。更多细节，请查看 ng2-jsform 的文档。
示例
这里是一个基于 ng2-jsform 的简单表单示例。
-- -------------------- ---- -------
-----------
-----------
------- ---------
------------- -
------- -
------- ---------
-------- ----
--
-------- -
------- ---------
--------- --------
-------- ------
--
----------- -
------- ---------
--------- -----------
-------- ----
--
------ -
------- ---------
-------- ----
-
-
--
----------
-----------------------------
--------------这个表单将创建一个包含四个输入框的表单，用于输入姓名、电子邮件、密码和年龄。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1f81e8991b448e6ebc