引言
在前端开发过程中，表单是常常用到的控件。ngx-formly 是 Angular 的一个库，旨在帮助简化和统一 Web 表单的创建。ngx-formly-tabs 则是 ngx-formly 的扩展，它提供了一个 tab 栏展示表单的组件，能够帮助我们更好地组织表单信息，提高用户体验。本篇文章主要介绍 ngx-formly-tabs 的使用教程。
安装
ngx-formly-tabs 是一个 npm 包，首先需要安装依赖：
npm install ngx-formly angular-tabs ng-select -S
注：angular-tabs 和 ng-select 都是 ngx-formly-tabs 的依赖，因此也需要一并安装。
使用
在使用 ngx-formly-tabs 的时候，需要注意以下几点：
1. 导入模块
在 app.module.ts 中导入：
-- -------------------- ---- -------
------ - ---------------- - ---- ------------------
-----------
-------- -
-----------------
-- -------
--
-- -------
--
------ ----- --------- - -2. 添加表单配置信息
我们需要首先添加表单配置信息。如下所示：
-- -------------------- ---- -------
------ - ------------------------ ------------ - ---- -------------------
------ - ---------------- - ---- ------------------
-----------
-------- -
-- -------
----------------------
------ -
-- -------
--
--------- -
-- ---------
- ----- ---------------------- ---------- -------------------------- --
--
---
------------------------
-- -------
--
-- -------
--
------ ----- --------- - -
------ ----- ---------- - -
----- --- --------------
------- -
-
---- -----------
--------- ------------------------
---------------- -
------ -------
--
----------- -
-
---- ------------
----- --------
---------------- -
------ ------ ------
--------- -----
--
--
-
---- -----------
----- --------
---------------- -
------ ----- ------
--------- -----
--
--
--
--
--
--在表单的 fieldGroup 属性中，我们可以看到我们添加了 wrappers: ['formly-wrapper-tabs'] 和 templateOptions: { label: 'Tabs' } 这两个属性。这也是使用 ngx-formly-tabs 的一个重要步骤。
3. 添加 Tabs 组件
我们需要在 html 模板中添加 Tabs 组件。如下所示：
<form [formGroup]="form">
<!-- ...其他表单字段 -->
<formly-tabset [fields]="fields[0].fieldGroup"
(fieldChange)="tabChange($event)">
</formly-tabset>
</form>这里我们需要注意：
- 在 tabset 组件的 [fields] 属性中，我们需要传入我们的表单
fieldGroup字段； - 在 tabset 绑定的
(fieldChange)事件，我们可以通过$event.fieldGroup获取当前 tab 下所有表单字段的值。
4. 添加表单包装组件
最后，我们需要添加一个自定义的表单包装组件，用来实现 tab 页签的效果。代码如下：
-- -------------------- ---- -------
------ - ---------- ---------- ---------------- - ---- ----------------
------ - ---------- ----------------- - ---- -------------------
------ - --------------- - ---- ---------------------
------------
--------- ----------------------
--------- -
---- ----------------- ------ -----------
------- --------
---- ----------- --- -- -------- --- - - ------ --------------------- ----------- --- ---
------------- -----------------------------
------
---------
------
--
--
------ ----- -------------------------- ------- --------- -
-------------------- - ------- ---- -- -------- ----------------
------------- ------------
--- ----- - ----- ------------------- - -
------ ---------------------------
-
---------- -
-----------------
-
----------------- ---- -
----- ------------- - ---
--------------------------------- ---- -- -
----- --- - -----------------
------------------ - ------------------ -- ---
----------------------------- - ------------------------
---
-------------------------------------------
-
-示例代码
下面为一个完整的示例代码：
-- -------------------- ---- -------
------ - ---------- --------- ---------- ---------------- - ---- ----------------
------ - ------------ --------- - ---- -----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------------------ ------------ - ---- -------------------
------ - --------------------- - ---- ------------------------
------ - ---------------- - ---- ------------------
------ - --------------- - ---- ---------------------
------ - ------------ - ---- ------------------
-----------
------------- -
-------------
-- -------
--
-------- -
--------------
------------------------
-- -------
----------------------
------ -
- ----- --------- ---------- -------------------------- --
-- -------
--
--------- -
-- ---------
- ----- ---------------------- ---------- -------------------------- --
--
---
----------------------
-----------------
------------------------
--
---------- ---
---------- ---------------
--
------ ----- --------- --
------------
--------- -----------
--------- -
----- -------------------
------------- ----------- ----- -- ------- -------------------------------
-------------- -------------------------------
----------------------------------
----------------
------- ---------- ------------
------------------------
-------------------
------
---------
-------
--
--
------ ----- ------------ -
--------------------------- - ------- ---- -- -------- ----------------
---- - --- --------------
------ - -
-
---- ------------
----- --------
---------------- -
------ ------ ------
--------- -----
--
--
-
---- -----------
----- --------
---------------- -
------ ----- ------
--------- -----
--
--
-
---- -----------
--------- ------------------------
---------------- -
------ -------
--
----------- -
-
---- ------
----- --------
---------------- -
------ ------
--------- -----
--
--
-
---- --------
----- --------
---------------- -
------ ------ ---------
--------- -----
--
--
-
---- -----------
----- --------
---------------- -
----- -----------
------ -----------
--------- -----
--
--
--
--
--
-------- -
-----------------------------
-
----------------- ---- -
----- ------------- - ---
--------------------------------- ---- -- -
----- --- - -----------------
------------------ - ------------------ -- ---
----------------------------- - ------------------------
---
------------------------------------
-
-
------------
--------- ----------------------
--------- -
---- ----------------- ------ -----------
------- --------
---- ----------- --- -- -------- --- - - ------ --------------------- ----------- --- ---
------------- -----------------------------
------
---------
------
--
--
------ ----- -------------------------- ------- --------- -
-------------------- - ------- ---- -- -------- ----------------
------------- ------------
--- ----- - ----- ------------------- - -
------ ---------------------------
-
---------- -
-----------------
-
----------------- ---- -
----- ------------- - ---
--------------------------------- ---- -- -
----- --- - -----------------
------------------ - ------------------ -- ---
----------------------------- - ------------------------
---
-------------------------------------------
-
-总结
ngx-formly-tabs 是一个很好的表单组件，能够帮助我们更好地组织表单信息，提高用户体验。本篇文章介绍了 ngx-formly-tabs 的使用教程，并提供了示例代码。希望本篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583bcd