介绍
angular2-json-schema-form-updated 是一个用于 Angular 2 及以上版本的库，它提供了一个快速生成 JSON 数据表单的方法。它基于 JSON Schema 规范，并在 Angular 2 中提供了一个组件化的方法，使得开发者能够快速地使用 JSON 数据来生成表单。
它的主要特点如下：
- 支持 JSON Schema 规范。
- 支持数据绑定。
- 简单易用，API 文档完善。
- 支持表单验证。
- 提供了多种表单元素类型。
安装
使用 npm 进行安装：
npm install angular2-json-schema-form-updated --save
这会将包安装至你的项目下，并将其添加到 package.json 文件中。
快速使用
生成表单
首先，在你的组件中引入 JsonSchemaFormModule：
-- -------------------- ---- -------
------ - -------------------- - ---- ------------------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------
--------------------
------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -其中，JsonSchemaFormModule.forRoot() 只需要在根模块中调用一次即可，它将为你的应用程序提供 ng2-json-schema-form 模块。之后，你就可以使用 ng2-json-schema-form 标记。
在 HTML 文件中，我们可以使用 ng2-json-schema-form 组件来生成表单。一个基本的用法如下：
<json-schema-form [schema]="mySchema" [model]="myModel" [layout]="myLayout" (onSubmit)="submitData($event)"> </json-schema-form>
其中：
schema是 JSON Schema 规范下的数据格式。model是 JSON 实例数据格式。layout是指定表单的布局格式。(onSubmit)是表单提交时触发的事件。
这里需要注意的是，layout 是可选的。如果没有指定布局，ng2-json-schema-form 会自动生成默认布局。
自定义表单控件
ng2-json-schema-form 提供了很多常见的表单控件，例如文本框、下拉框、单选框等。但是，有时候我们需要自定义表单控件。
在使用 ng2-json-schema-form 时，我们可以通过在 schema 中使用 widget 属性，指定使用的控件。
例如：
{
"type": "string",
"widget": {
"id": "my-custom-widget"
}
}它中的 id 属性可以用于指定控件的 ID。然后，我们可以在应用的任何地方使用这个控件。
例如，我们可以将自定义的控件添加到 app.module.ts 中：
-- -------------------- ---- -------
------ - ----------------------- - ---- ---------------------------------------
-----------
---
------------- -
-------------
-----------------------
--
---------------- -
----------------------- -- --- ------
-
---
--
------ ----- --------- - -在 entryComponents 中，我们必须将组件加入到 Angular 的编译列表中，否则 Angular 不会使用它到生成器中。
然后，在 schema 中我们可以这样使用：
{
"type": "string",
"widget": {
"id": "my-custom-widget"
}
}表单验证
ng2-json-schema-form 支持表单验证。可以通过在 schema 下指定 required 属性或使用 format 属性指定数据格式。除此之外，ng2-json-schema-form 也支持自定义验证器。
例如，在 schema 中添加自定义验证器：
-- -------------------- ---- -------
-
------- ---------
-------- ---- ------
--------- -
----- -----------------
--
------------- -
-
------- ----------------------
-------- ---------------------------
--------------- -------- --- ------
-
-
-在 Angular 的代码中实现这个验证器：
-- -------------------- ---- -------
------ - --------- - ---- ------------------------------------
------ ----- ----------------- ---------- --------- -
---- - ----------------------
-------------------- ---- ---------- ----------- ------- -
----- ----- - --- ---------------------------------------------------------
------ -----------------------
-
-然后，在 app.module.ts 或者任何其他的模块中，将自定义的验证器添加到 validators 列表中：
-- -------------------- ---- -------
------ - --------------------- - ---- ------------------------------------
------ - ----------------- - ---- -----------------------------------
-----------
---
---------- -
----------------------
-
-------- ---------- --------- ------------------ ------ ----
-
-
---
--
------ ----- --------- - -其他
ng2-json-schema-form 还支持导入/导出 JSON 数据，以及自定义布局样式等功能。如果需要了解更多请查看官方文档。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------
------------
--------- -----------
--------- -
---- ------------------
------- ---------
-----------------
-------------------
-----------------
-------------------
--------------------------------
-------------------
------
-
--
------ ----- ------------ -
-------- - -
------- ---------
------------- -
------------ -
------- ---------
-------- ------ -----
--
----------- -
------- ---------
-------- ----- -----
--
-------- -
------- ---------
-------- --------
--------- -------
--
------ -
------- ---------
-------- -----
--
---------- -
------- ---------
-------- ----------
------- -
------
---------
----
-
--
--------- -
------- ---------
-------- ---------
------- -
-------
--------
-
-
--
----------- -
------------
-----------
-------
-
--
------- - -
---------- -------
--------- ------
------ -----------------------
---- ---
-------- ------
------- ------
--
-------- - -
-
------ ------------
------- --------
--
-
------ -----------
------- -------
--
-
------ --------
------- -------
--
-
------ ------
------- -------
--
-
------ ----------
------- --------
--
-
------ ---------
------- -------
-
--
---------------- ----- ---- -
----------------------- ------
-
-总结
ng2-json-schema-form 是一个非常实用的库，它可以帮助我们快速生成复杂的 JSON 数据表单，而且它的使用也非常简单，只需要几个简单的配置就可以了。
同时，ng2-json-schema-form 也支持自定义表单控件和验证器，如果我们想使用自定义的表单控件或验证规则时，它也提供了很好的支持。 有了它的帮助，我们能以更快、更简单的方式开发我们的应用程序，从而提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055da281e8991b448db5d4