在现代 Web 应用程序中,表单是一个必不可少的元素。 为了更好的组织并优化表单的使用体验,我们需要一个高效的表单管理方式。@ngx-form/material
就是一个为 Angular 提供的表单管理方式,它是通过对 Angular 的常见表单控件进行封装,使之更易用,并提供丰富的输入验证和 UI 元素支持的一种表单管理方式。
这篇文章将会教会您如何使用 @ngx-form/material
库,包含如何安装、使用以及与 Angular 的集成。
安装
在开始使用 @ngx-form/material
之前,我们需要先将其安装到我们的应用程序中。我们可以使用 npm
进行安装:
--- ------- ------------------
使用
包含模块
在使用 @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