简介
buildmotion-forms 是一个优秀的 npm 包，它可以为我们提供丰富的表单组件和表单验证等功能，使得我们能够更加便捷地开发表单相关的功能。本篇文章将会详细介绍该 npm 包的使用方法。
安装和使用
我们可以在 npm 上通过以下命令进行安装：
npm i buildmotion-forms
接着在项目中引入即可：
import { ReactiveFormModule } from 'buildmotion-forms';然后在模板文件中使用 ReactiveFormModule 就可以愉快地编写表单了。
表单基础控件
buildmotion-forms 支持文本框、下拉框、单选框等多种表单基础控件。以文本框为例，我们可以这样定义一个带有初始值和校验的文本框：
<input type="text"
[formControl]="firstName"
[value]="firstName.value"
[required]="true"
[minLength]="2"
[maxLength]="20">上面的 firstName 是一个 FormGroup 对象。
自定义表单控件
除了基础的表单控件，buildmotion-forms 还支持自定义的表单控件，我们可以通过自定义组件的形式来定义一个自己的表单控件。这里给出一个自定义的手机号码输入框的例子：
-- -------------------- ---- -------
------ - ---------- ------ ---------- - ---- ----------------
------ - --------------------- ------------------ ------------ ---------- - ---- -----------------
-- ----------------------
------------
--------- ------------
------------ -------------------------
---------- --------------------------
---------- -
-
-------- ------------------
------------ ------------- -- ----------------
------ -----
--
--
--
------ ----- -------------- ---------- -------------------- -
------- --------------- - ------------- ------- -- - --
--------- - ---------------
------------ ---- ---------------------
---
------------------- --- ------------ - -
--- -------------- ------ -
------ ---------------------------------
-
--- ---------------- ------- -
------------------------- ------------ --- ---
-
--------------- -------- ---- -
---------------- - ----
-
-------------------- ----- ---- -
-------------------- - ---
-
--------------------- ----- ---- - -
-------------------- -
---------------------------------------
-
-我们可以在父组件中使用自定义组件的形式来使用该手机号码输入框：
<app-phone></app-phone>
表单验证
buildmotion-forms 支持多种表单验证方式，例如必填、最小长度、最大长度等。以「必填」验证为例，我们可以在组件中这样定义：
<input type="text"
[formControl]="firstName"
[value]="firstName.value"
[required]="true"
[minLength]="2"
[maxLength]="20">我们还可以通过设置错误消息来实现更加友好的表单验证提示：
-- -------------------- ---- -------
------ -----------
-------------------------
-------------------------
-----------------
---------------
-----------------
------------- ------------------------ -- ---------------- -- --------------------
---- ------------------ ----------------------------------
----- ---- -- ---------
------
---- ------------------ -----------------------------------
----- ---- ---- -- -- ----- - ---------- -----
------
---- ------------------ -----------------------------------
----- ---- ------ -- ---- ---- -- ---------- -----
------
---------------总结
本篇文章介绍了 buildmotion-forms 的安装、表单基础控件、自定义表单控件和表单验证等功能。buildmotion-forms 为我们提供了更加便捷的表单开发体验，值得前端开发者们深度学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f881e8991b448e0c48