简介
在前端开发中，表单是经常使用的元素之一。@ng2-dynamic-forms/ui-material 是一个基于 Angular Material 开发的动态表单库，使用它可以快速实现各种表单需求。
安装
在使用前，需要安装以下依赖包：
- @angular/core
- @angular/forms
- @angular/material
- @ng2-dynamic-forms/core
- @ng2-dynamic-forms/ui-material
你可以通过 npm 进行安装：
npm install @ng2-dynamic-forms/ui-material --save
基本用法
导入模块
在项目中导入 MaterialModule 和 DynamicFormsMaterialUIModule 模块：
-- -------------------- ---- -------
------ - -------------- - ---- --------------------
------ - ---------------------------- - ---- ---------------------------------
-----------
-------- -
---------------
-----------------------------
---
--
---
--
------ ----- --------- --指定表单元数据
定义表单元数据（元数据包括字段类型、验证规则等信息），比如：
-- -------------------- ---- -------
---------- ------------------------- - -
--- -------------------
--- ------------
------ ------ ------
----------- -
--------- ----
--
---
--- -------------------
--- -----------
------ ----- ------
----------- -
--------- ----
--
---
--- ------------------------
--- --------------
------ ----- -- -------
------- ------
---
--生成表单
在模板中生成表单：
<ng2-dynamic-forms-material-ui [group]="formGroup" [model]="formModel"></ng2-dynamic-forms-material-ui>
更多用法
启用自定义化主题
可以将 @angular/material 的自定义化主题应用到 @ng2-dynamic-forms/ui-material 上。首先在项目中定义一个 MaterialDesignFramework 类：
import { MaterialDesignFramework } from '@ng2-dynamic-forms/ui-material';
export class CustomMaterialDesignFramework extends MaterialDesignFramework {
// 自定义样式属性
wrapper: string = 'col-lg-4';
label: string = 'col-lg-4';
control: string = 'col-lg-12';
}然后在模块中导入并注册该类：
-- -------------------- ---- -------
------ - ----------------------------- ----------------------- - ---- ---------------------------------
------ - ----------------------------- - ---- -------------------------------------------
-----------
-------- -
-----------------------------
---
--
---------- -
- -------- ------------------------ --------- ------------------------------ ------ ---- --
-
---
--
------ ----- --------- --自定义表单控件
你可以使用自定义组件来替换 ui-material 默认的表单控件。
首先，定义自定义组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------------------- ----------------------------- - ---- --------------------------
------------
--------- -------------------------
--------- -
----------------
------ -------- ------------------------ --------------------------- -------------------------------- --------------- ------------------------- --------------------------------- ------------------------
---------------------- --------- ---------------------------------------
--------------- -------------------------
-----------------
-
--
------ ----- ---------------------------- ------- --------------------------- -
--------------------- ------------------------------ -
-- -------
-
-然后，在模块中注册该组件：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------------------- --------------- - ---- ----------------
------ - ------------ ------------------- - ---- -----------------
------ - -------------- - ---- --------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ---------------------- - ---- --------------------------
------ - ----------------------------- ------------------------ ---------------- - ---- ---------------------------------
------ - ------------ - ---- ------------------
------ - ---------------------------- - ---- -------------------------------------
-----------
-------- -
------------------------
------------
--------------------
---------------
---------------------------------
-----------------------------
--
------------- -
-------------
----------------------------- -- -------
--
---------------- -
----------------------------- -- -------- ---------------
--
---------- -
- -------- ----------------- --------- ------------------------ ------ ---- --
--
---------- --------------
--
------ ----- --------- --最后，实例化自定义控件模型，并生效：
-- -------------------- ---- -------
---------- ------------------------- - -
--- ------------------------
--- --------------
------ ----- -- -------
------- ------
-------------------------------- -
- ---------- --------- ------------- ---------------------------------- -- -- --------
-
---
--结论
@ng2-dynamic-forms/ui-material 是一个强大的动态表单库，使用起来非常简单，并且还支持自定义化主题和自定义表单控件。在实际项目开发中，可以有效地提高开发效率，值得使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e244875