简介
wieldoformlymaterial 是一个基于 Angular 的 UI 组件库，它提供了丰富的 UI 组件，用于构建前端界面。wieldoformlymaterial 支持 Angular 5 及以上版本，可以让开发者更高效地开发出美观、易用的前端界面。
安装
可以通过 npm 安装 wieldoformlymaterial 包，执行以下命令：
npm install wieldoformlymaterial --save
使用
在使用 wieldoformlymaterial 之前，需要先引入 Angular Material 和 BrowserAnimationsModule，可以通过执行以下命令来安装这两个依赖：
npm install @angular/material@5.2.5 @angular/cdk@5.2.5 @angular/animations@5.2.5 --save
在 Angular 的模块中引入这些依赖：
-- -------------------- ---- -------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------------ - ---- -------------------------------
------ - -------------- - ---- --------------------------
------ - --------------- - ---- ---------------------------
------ - --------------- - ---- ---------------------------
------ - ------------------- - ---- -------------------------------
-----------
-------- -
------------------------
-------------------
---------------
----------------
----------------
-------------------
--
-------- -
------------------------
-------------------
---------------
----------------
----------------
-------------------
-
--
------ ----- ------------ - -在 Angular 组件中引入 wieldoformlymaterial：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------
------ - ----------------- - ---- -------------------
------ - -------------------------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
---- - --- --------------
----- - - ------ ------------------- --
------- ------------------- - --
---- --------
----- --------
---------------- -
------ ------ ---------
------------ ------ -------
--------- -----
----- -------
-
---
---------- -
------------------------
-
-在组件的 HTML 文件中使用 wieldoformlymaterial：
<form [formGroup]="form" (ngSubmit)="onSubmit()"> <formly-form [model]="model" [fields]="fields" [form]="form"></formly-form> <button mat-raised-button type="submit">Submit</button> </form>
其他功能
wieldoformlymaterial 还支持以下功能：
表单验证
wieldoformlymaterial 可以根据模板中定义的表单验证规则来验证表单。模板中可以指定每个表单元素的验证规则和错误提示。
-- -------------------- ---- -------
------- ------------------- - --
---- --------
----- --------
---------------- -
------ --------
------------ ------ ---------
--------- -----
----- -------
--
----------- -
------ -
----------- --------- ---------------- -- -
----- ------ - -----------------------------------
------ ---------------------------
--
-------- -------- -- --- - ----- ----- --------
-
-
---
-- -------- ------- ------------表单控件绑定
wieldoformlymaterial 支持将模板中的表单元素绑定到组件中的属性，这样表单提交时就可以将表单数据直接绑定到组件的属性上。
-- -------------------- ---- -------
------- ------------------- - --
---- -------
----- --------
---------------- -
------ -------
------------ ------ ---- ------
--------- ----
-
---
----- - -
----- ----- ----
--
-- ------ --------------- ---------自定义表单元素
wieldoformlymaterial 提供了丰富的表单元素，但是有时候需要自定义一些表单元素。可以通过实现 FormlyFieldConfig 中的 type 属性来自定义表单元素。
-- -------------------- ---- ------- ------ --------- ----------------- - -- --- --- - --- ---- -- --- ------ ---- -- ------ --- ----------- -------- --- -------- ----------- - -------- ----- --- --------------- ------------------ --------------- --------------- - ---------------------- --------------------- ---------------------- --- ---------------- - ------------- ---- --- -- - ------ -------- ---- -- ---- ---- ---------- --- --------------------------- -- ------ ------- -
自定义表单元素需要实现一些关键的方法和属性，例如 getComponent、add() 等。具体可以参考 FormlyConfig 中的说明。
总结
wieldoformlymaterial 是一个非常实用的 UI 组件库，它提供了丰富的 UI 组件和表单元素，让开发者能够快速构建美观、易用的前端界面。本文介绍了如何安装和使用 wieldoformlymaterial，以及一些主要的功能。希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710a8dd3466f61ffe0a9