简介
@jaspero/ng2-form-builder 是一款 Angular 2+ 的表单构建器的 npm 包。通过它，我们可以快速构建出强大的表单，并通过一些简单的配置就能完成表单的验证。在本文中，我们将深入讲解如何使用 @jaspero/ng2-form-builder，通过示例代码演示其用法，以及为读者带来学习和指导意义。
安装
在开始之前，我们需要通过 npm 安装 @jaspero/ng2-form-builder。
--- ------- -------------------------
接着，在 app.module.ts 中引入 JasperoFormBuilderModule 并添加到 imports 中。
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------------- - ---- -----------------
------ - ------------------------ - ---- ----------------------------
-----------
------------- ---
-------- -
-------------
--------------------
------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -基本用法
在本节中，我们将演示如何创建一个简单的表单。
- 导入
JasperoFormBuilderService。
------ - ------------------------- - ---- ----------------------------
- 声明局部变量
form。
---- - ---------------------------- ----- ----- ------ ---- --------------------- ------------------- --------- ----- ---------------- ---- ------------------------------------- ---
以上代码声明了一个包含四个字段的表单，分别是 name、email、password 和 confirmPassword。其中，name 和 password 的初始值为空字符串，email 和 confirmPassword 则有相应的验证规则。
- 在 HTML 中添加表单元素。
----- ------------------ -----------
-------
-----
------ ----------- -----------------------
--------
-------
------
------ ------------ ------------------------
----- -------------------------------------------------
----- -- --------
-------
----- ----------------------------------------------
------- ----- ------
-------
--------
-------
---------
------ --------------- ---------------------------
--------
-------
------- ---------
------ --------------- ----------------------------------
----- ----------------------------------------------------------
--------- ---- -----
-------
--------
------- ------------- -----------------------------------------
-------注意到，在 HTML 中，我们必须将表单和表单字段与 form 相关联。在此基础上，我们还可以根据字段的验证状态，动态显示或隐藏错误信息。
高级用法
在本节中，我们将演示如何应用高级的表单配置和验证规则。
配置自定义方法
@jaspero/ng2-form-builder 支持任意定制的验证方法。在本例中，我们将展示如何在表单中使用自定义的验证方法。
- 导入
CustomValidators。
------ - ---------------- - ---- ----------------------------
- 声明自定义验证方法。
-------- ----------------- -------- ----------- -
------ --------- ----------------- - ----- -------- --- - - ---- -- -
----- ------ - ------------- --- ------
------ ------ - ---- - - ----------- - ----- - --
--
-该方法检查给定控件的值是否等于指定值，并返回一个有 key 值为 checkValue 的对象。
- 使用自定义验证方法。
---- - ---------------------------- ----- ----- ---- ---- ------------------ ------ ---- --------------------- ------------------- --------- ----- ---------------- ---- ------------------------------------- ---
在表单的定义中，我们添加了一个名为 age 的字段，并使用 checkValue 方法对其进行验证。
- 在 HTML 中显示错误消息。
-------
----
------ ------------- ----------------------
----- -------------------------------------------------
---- -- -- ----- ---
-------
--------配置自定义控件
在某些情况下，我们需要在表单中使用自定义控件。在本例中，我们将演示如何使用自定义控件从而扩展表单功能。
- 声明自定义控件组件。
------ - ---------- ----- - ---- ----------------
------ - --------------------- ----------------- - ---- -----------------
------------
--------- ---------------
---------- -
-
-------- ------------------
------------ ---------------------
------ ----
-
--
--------- -
------ ----------- --------------------
-
--
------ ----- -------------------- ---------- -------------------- -
-------- ------ -------
--------- ------- ---- -- -----
------------- --
----------------- ---- -
---------- - ------
-
-------------------- ---- -
------------- - ---
-
--------------------- ---- --
----------------------------- -------- --
-该组件是一个简单的文本输入框，并实现 ControlValueAccessor 接口。
- 在表单中使用自定义控件。
---- - ---------------------------- ----- ----- ------- ---- ---
在表单的定义中，我们添加了一个名为 custom 的字段，并在 HTML 中添加了一个自定义的 custom-input 控件。
- 在 HTML 中添加自定义控件。
------- ------- ------------- ---------------------------------------- --------
配置动态控件
在某些情况下，我们需要动态添加和删除表单字段。在本例中，我们将展示如何通过 @jaspero/ng2-form-builder 实现动态添加和删除表单字段。
- 导入
FormBuilder和FormGroup.
------ - ------------ --------- - ---- -----------------
- 声明表单字段数目的初始值。
--------------- - --
在这里，我们定义了表单的初试字段数目为 2。
- 在 HTML 中添加动态按钮。
------- ------------------------ -------------- ------- ------------------------------ --------------
通过调用 addField 和 removeField 方法，我们可以动态地添加和删除表单字段。
- 实现添加和删除表单字段的逻辑。
---- - --- --------------
---- - ---------
---- - -------
------------------- ------------ ------------ --
---------- -
-----------------------
------------------------------------------------------------ ---------------------------- ----------------------
-
------------- -
-- --------------------- - -- -
----------------------------------------------------------------
-----------------------
-
-上述代码中，我们通过定义名为 name 和类型为 text 的控件，使用 form.addControl 方法添加了一个新的表单字段。同时，通过 form.removeControl 方法删除了最后一个表单字段。
结论
在本文中，我们向读者展示了如何使用 @jaspero/ng2-form-builder，通过示例代码演示其用法，以及为读者带来学习和指导意义。@jaspero/ng2-form-builder 是一个非常实用的 Angular 2+ 表单构建器，具有很高的可定制性和扩展性，值得我们深入学习和使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bc5967216659e24438f