在现代 Web 应用程序中，表单是一个必不可少的元素。 为了更好的组织并优化表单的使用体验，我们需要一个高效的表单管理方式。@ngx-form/material 就是一个为 Angular 提供的表单管理方式，它是通过对 Angular 的常见表单控件进行封装，使之更易用，并提供丰富的输入验证和 UI 元素支持的一种表单管理方式。
这篇文章将会教会您如何使用 @ngx-form/material 库，包含如何安装、使用以及与 Angular 的集成。
安装
在开始使用 @ngx-form/material 之前，我们需要先将其安装到我们的应用程序中。我们可以使用 npm 进行安装：
npm install @ngx-form/material
使用
包含模块
在使用 @ngx-form/material 之前，我们必须先将其包含到我们的应用程序模块中。可以将下面这段代码添加到您的 app.module.ts 中：
-- -------------------- ---- -------
------ - ------------- - ---- ---------------------
-----------
-------- -
-- ----
--------------
--
--
------ ----- --------- - -在模板中使用
在将 @ngx-form/material 包含到应用程序模块之后，我们可以在我们的模板中直接使用它了。以 Material Design 风格的 mat-form-field、mat-input 控件为例，我们可以这样写：
-- -------------------- ---- -------
--------------- ---------------------
-----------------------------------
------------------
---------------
-------
-----------
--------
-------------
--------------
------------------
--------------------- - - -- ------------------
-------------------
---------------------------------------------------------
-----------------在上面的代码中，<ngx-form-*> 是 @ngx-form/material 的封装控件。<ngx-form-field> 元素表示一个表单组件，包含 <ngx-form-control>、<ngx-form-label>、<ngx-form-input>、<ngx-form-validation-errors> 等子元素。其中，<ngx-form-input> 控件代表一个输入组件，支持的输入类型包括文本（text）、数字（number）、邮箱（email）、URL（url）等。 ngModel 用于双向数据绑定。<ngx-form-validation-errors> 控件用于显示输入验证的错误信息。
在代码中使用
我们可以在组件中使用 FormControl类来实现与表单数据的绑定。下面是一个简单的例子，它创建了一个 FormControl 实例，并将其绑定到 HTML 模板中的一个输入框中：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- --------------
--------- -
----------------
-----------------------------------
------------------
--------------- ---------------------------------------------
-------------------
---------------------------------------------------------
-----------------
--
--
------ ----- ---------------- -
----------- - --- --------------- - --------- ---- ---
-在上面的代码中，我们创建了一个 nameControl 实例，将其绑定到 HTML 模板中的一个输入框中。在 nameControl 实例中，通过 required: true 告诉 @ngx-form/material，输入框无法为空。
自定义验证器
我们也可以通过自定义验证器来实现对表单数据的验证。下面是一个示例，它通过自定义验证器来实现验证密码和确认密码是否匹配：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ ---------- - ---- -----------------
------------
--------- --------------
--------- -
----------------
-----------------------------------
------------------
--------------- -------------------------------------------------
-------------------
---------------------------------------------------------
-----------------
----------------
-------------------------------------
------------------
--------------- --------------------------------------------------------
-------------------
-----------------
--
--
------ ----- ---------------- -
--------------- - --- --------------- -
--------------------
------------------------
---
---------------------- - --- --------------- -
--------------------
---
------------- -
-------------------------------------------
--------------------
--------- --
------------- --- --------------------------
- ----
- - ----------------- ---- --
---
-
-在上面的代码中，我们创建了 passwordControl 和 confirmPasswordControl 实例，并通过 Validators 类定义了验证规则。通过 setValidators() 方法，将自定义验证器绑定到 confirmPasswordControl 实例上面，从而实现了密码和确认密码的比较验证。
总结
在本篇文章中，我们介绍了 @ngx-form/material 的使用，包括如何安装、包含模块、在模板中使用、在代码中使用、以及自定义验证器等内容。通过学习本文，您可以更好的使用 @ngx-form/material 来优化表单的使用体验，提高 Web 应用程序的用户满意度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562db81e8991b448e042e