简介
@tdm/angular-forms-mapper 是一个 Angular 表单数据映射工具库。它可以将接口返回的 JSON 数据映射到表单控件，并将用户修改的数据映射回 JSON 数据。此库使用了 Angular 表单、表单控件以及 Angular 动态表单的一些 API，使我们能够更加灵活地控制表单数据的映射。
安装
--- ------- ------ -------------------------
使用说明
导入依赖
在你的 app.module.ts 中导入以下依赖：
------ - -------- - ---- ----------------
------ - ------------------- - ---- -----------------
------ - -------------- - ---- ----------------------------
-----------
-------- -
-- -- -- --------- ---- ------------- ------ -- -------- ------ --------------
-- ----- -------------- ---- ---------- ---- --------------
--------------------
-- ---- ------ --- ----- ------- ---- -------- --- -------- ------ ---- --------
--------------
-
--
------ ----- --------- --创建模型
首先我们需要创建一个模型类，以便映射 JSON 数据。模型类一般需要继承 MapExclude（该类位于 @tdm/core 包中）以减少映射的工作量。例如：
------ - ---------- - ---- ------------
------ ----- ------ ------- -----------
-
---- ----
--
-- ---------- -- ------- ---- -------
---------------
- -
--- -------
----- -------
---- -------
---- -----
------------ - ------- ------- ----- ------ --
-以上定义了一个人的基本信息，包括姓名、年龄、出生日期、家庭住址等字段。其中，我们通过继承 MapExclude 类来排除在映射时不需要的字段。
映射到表单控件
首先，我们需要初始化一个 Person 实例。然后，我们使用 TDMFormBuilder 来创建表单，并将 Person 实例映射到表单控件：
------ - ---------- ------ - ---- ----------------
------ - --------- - ---- -----------------
------ - -------------- - ---- ----------------------------
------------
--------- -------------------
--------- -
----- -------------------
------ ----------- ---------------------- --
------ ------------- --------------------- --
------ ----------- --------------------- --
-------
-
--
------ ----- ----------- ---------- ------ -
----- ----------
------- -------
------------------- -------- --------------- --
---------- -
----------- - --- --------
--- -----
----- -------
---- ---
---- --- ------
---
--------- - ------------------------------------------------
-
-以上代码使用了 Angular 表单和表单控件，并通过 TDMFormBuilder 将 Person 实例映射到表单控件。当表单控件值改变时，Person 实例也会相应地更新。
映射回 JSON 数据
当用户提交表单时，我们需要将表单数据映射回一个 JSON 数据格式。我们可以使用 TDMFormRenderEvents 来监听表单提交事件，并将表单数据映射回 JSON 数据：
------ - --------- - ---- ----------------
------ - ------------------- - ---- ----------------------------
------------
--------- -------------------
--------- -
----- ------------------ ----------------------------
------ ----------- ---------------------- --
------ ------------- --------------------- --
------ ----------- --------------------- --
------- -----------------------------
-------
-
--
------ ----- ----------- -
----- ----------
------------
------- -------- ---------------
------- ----------- -------------------
- --
---------- -
--------- - -------------------------------------- ----------
-
--------------- ------ -
-----------------------
----------------------- ------ -----------
----- ---- - --------------------------------------
------------------- ------ ------
-
-以上代码中，我们监听了表单的提交事件，并使用 TDMFormRenderEvents 来获得表单数据，然后通过 TDMFormBuilder 将其映射到 JSON 格式。我们可以使用映射的 JSON 数据来更新服务器端的数据。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005596481e8991b448d6e0d