前言
在现代 web 前端应用中，数据渲染是十分重要的部分。而对于复杂的数据结构，我们需要使用一些工具来简化数据的处理和渲染，以提高开发效率。@jsonforms/material-renderers 就是其中之一，它可以帮助我们快速生成可定制的 UI 组件。
介绍
@jsonforms/material-renderers 是一个基于 JSON Schema 的表单渲染器，它提供了一系列基于 Angular Material 的 UI 组件。这些组件可以自动解析 JSON Schema 中的数据结构，并生成出相应的表单 UI。同时，@jsonforms/material-renderers 也提供了丰富的配置选项，我们可以通过配置来调整表单的 UI 样式、布局以及表单项的渲染方式。
安装
在使用 @jsonforms/material-renderers 前，需要先安装相应的依赖：
npm i @jsonforms/angular-v8 @jsonforms/material-renderers --save
这里同时需要安装 @jsonforms/angular-v8 模块，因为 @jsonforms/material-renderers 是基于该模块构建的。
使用
假设我们已经有了一个 JSON Schema 数据，它长这样：
-- -------------------- ---- -------
-
------- ---------
------------- -
-------- -
------- ---------
-------- -------
--
-------------- -
------- ---------
-------- -------------
--
------- -
------- ----------
-------- -------
-
-
-我们可以通过 @jsonforms/material-renderers 来快速生成一个表单 UI：
<!-- app.component.html -->
<form #jsonForms1="ngForm">
<div jsonforms-root="myForm" ngFormGroup="{myForm: formGroup}">
</div>
</form>-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ------------------------
------ - ----------------------------- - ---- --------------------------------
------ - --------- - ---- -----------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------ ------ - -
-- ---- ------ ---- ----
--
------ ---- - -
-
----- ----------
------ --------------------
--
-
----- ----------
------ --------------------------
--
-
----- ----------
------ -------------------
-
--
------ ---------- ----------
------- ----------------- -----------------
----------------------------- ----------------- -
--------------------- - -----------------
---------------------------------
-- ---- ----- ------------- ------ ---- ----
---
-------------- - -------------------------------------
-
-在上面的示例中，我们通过定义 schema 和 form 变量来指定表单的 JSON Schema 和表单项的配置。接下来，我们在构造函数中实例化 JsonFormsService，并调用 setConfig 方法来指定 JSON Forms 的配置。最后，我们通过 getFormGroup 方法来获得互动表单的表单组。
配置选项
我们可以通过调整 JSON Forms 的配置来控制所生成的表单 UI 的各个方面。下面是一些常用配置选项：
layout: 设置表单项的布局方式，包括 horizontal、vertical 和 vertical compact 等；theme: 设置表单 UI 的颜色和样式；fields: 允许我们自定义表单项的 UI 组件；uischema: 用于指定表单项与 UI 组件之间的映射关系；
自定义表单项
当使用 @jsonforms/material-renderers 时，我们可以自定义表单项的 UI 组件，以满足一些定制化需求。
-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ------------------------
------ - ----------------------------- - ---- --------------------------------
------ - --------- - ---- -----------------
------ - --------------- -------------------- - ---- -------------------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------ ------ - -
-- ---- ------ ---- ----
--
------ ---- - -
-
----- ----------
------ --------------------
--
-
----- ----------
------ --------------------------
--
-
----- ----------
------ -------------------
--
-
----- ---------
------ ------ ----
-
--
------ ---------- ----------
------- ----------------- -----------------
----------------------------- ----------------- -
--------------------- - -----------------
---------------------------------
--------- -
-
------- ---------------------
--------- --------------
-
--
-- ----- ---- ----- ------------- ------- -- ----
---
-------------- - -------------------------------------
-
-在上面的示例中，我们通过 ButtonRenderer 和 ButtonRendererTester 来自定义了一个按钮的表单项。tester 用于确定当前表单项应该使用哪个组件渲染器，而 renderer 则用于指定应该使用的 renderer component。
-- -------------------- ---- -------
------ ----- -------------- ------- -------- -
------------
------- ----------- ----------
------- -------------- --------------------
- -
--------
-
------ ---------------- -------------- ----- --------------------------- -
----- ------ ------ - ---------- - ---------- - ---------
----- --------- - ------------------------------------------------- -
------ --------
----- - ------ ----- -
---
---------------------------------------- -- -
---------------- ------ --- ------- ------ - ------------
-- ------- --- ------ -
-----------------------------
-
---
-
-
------ ----- --------------------- ------------ - ---------
---------
-------------- --------------------------- -- ------------------ --- ----------
--在 ButtonRenderer 类中，我们声明一个 render 方法，它用于呈现按钮表单项的 UI。在 ButtonRendererTester 中，我们声明了一个测试器，该测试器用于检查所渲染的表单项是否为按钮类型的表单项。
结语
@jsonforms/material-renderers 给前端工程师在处理表单数据方面提供了一个优秀的工具。通过它，我们可以快速、简便地生成高度定制的表单 UI，并且还能扩展组件库以满足需求。我们可以通过调整 JSON Forms 的配置及自定义组件调整表单 UI，以创建更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/jsonforms-material-renderers