介绍
angular2-json-schema-form-custom 是一个基于 Angular2 和 json-schema 的 npm 包，用于快速生成表单。该 npm 包提供了一种通过 json-schema 来描述表单的方法，并且可以根据 json-schema 来构建表单控件。同时，该 npm 包提供了多样化的表单控件，使用户可以根据需要来自定义表单元素。
安装
可以通过 npm 安装该包：npm install angular2-json-schema-form-custom
使用步骤
1. 引入模块和组件
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------------------- - ---- -----------------------------------
------ - ------------ - ---- ------------------
-----------
-------- --------------- --------------------------------
------------- ---------------
---------- --------------
--
------ ----- --------- - -2. 编写组件
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ------------------------ --------------------- - ---- -----------------------------------
------------
--------- -----------
--------- ------------------ ----- ----------------- ----------------- ------------- ----------------------------------------
--
------ ----- ------------ -
------------------ ----- ------------------------
------------------- ---- ---------------------- -
-
------ - -
------- ---------
------------- -
-------- - ------- --------- --------- -------- -------- ------- --
----------- - ------- --------- ------------ -- -------------- ------ ---- --------- -
--
----------- --------- -----------
--
------ - -
-
------- ------
-------- ------ ---- ---------
-------- -
- ------ -------- ----------- ---- --
- ------ ---------- -
-
-
--
---- - -
-------- -------------------
----------- --
--
------- - -
--------- -------
--
-3. 运行应用
使用 ng serve 命令来启动应用，然后访问 http://localhost:4200 即可看到表单界面。
自定义控件
除了使用默认的表单控件外，该 npm 包还支持用户根据需要来自定义表单控件。下面是一个自定义控件的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -----------------------------------
------------
--------- ---------------------
--------- -
-----
------ ---------------------------------
------ --------------
------------------
--------------------------------
-----------------------
--------------------------
---------------------
------
-
--
------ ----- ---------------------- ------- ------------- -
----- ------ - -------
------------ ------ - ---
------------- -
--------
-
-然后在表单 schema 中使用 widget 字段指定该控件：
...
{
"key": "email",
"title": "Email",
"type": "string",
"widget": "textbox"
}
...结束语
通过本文，我们了解了使用 angular2-json-schema-form-custom 包来生成表单的方法。该 npm 包具有良好的可扩展性，用户可以根据自己的需求来自定义表单控件。如果您对此感兴趣，不妨试试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562da81e8991b448e0410