Ngrx-form 是一个基于 React 应用的状态管理库，用于管理表单的状态和验证。该库可以简化表单的状态和验证管理，提高应用的可维护性和可扩展性。
在本教程中，我们将学习如何使用 Ngrx-form 帮助管理 React 应用中的表单。
安装
要开始使用 Ngrx-form，我们需要先安装它。可以通过 npm 安装它：
npm install --save @ngrx/form
基本用法
Ngrx-form 提供了一些函数和组件，用于管理表单状态和验证。我们可以使用这些函数和组件来创建我们的表单。
首先，我们需要导入 Ngrx-form 相关的函数和组件：
import {
createFormGroupState,
FormGroupState,
formGroupReducer,
} from '@ngrx/form';然后我们可以创建一个表单状态对象：
const formState = createFormGroupState('myForm', {
name: '',
email: '',
message: '',
});这将创建一个表单状态对象，包含三个字段：name、email、message。
接下来，我们需要将这个表单状态对象传递给我们的组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------------
------ - ---------- ------------ ------ - ---- ------------------
------ -
---------------------
---------------
-----------------
- ---- -------------
----- ------ - -- -- -
----- -------- - --------------
----- --------- - ------------------------------ -
----- ---
------ ---
-------- ---
---
------ -
------
-----------
------------
---------
-----------
------------------
-------------------------------------
------------- -- ---------- ----- -------------- -------- -------------- ---
--
------------
----------
------------
-------------------
--------------------------------------
------------- -- ---------- ----- --------------- -------- -------------- ---
--
------------
------------
-------------
---------------------
----------------------------------------
------------- -- ---------- ----- ----------------- -------- -------------- ---
--
------------
------- -----------------------------
-------
--
--
------ ------- -------在上面的组件中，我们创建了一个名为 MyForm 的 React 组件。在这个组件中，我们导入了 Ngrx-form 相关的函数和组件。我们创建了一个表单状态对象 formState，它包含三个字段：name、email、message。
我们将这个表单状态对象传递给了 FormControl 组件的 value 属性中，这样当文本框的值发生改变时，我们可以更新 formState 对象并发出一个 dispatch 操作。
表单验证
Ngrx-form 还支持表单验证功能。我们可以定义表单验证规则，以确保用户输入的数据符合我们的要求。我们可以使用 Ngrx-form 提供的 Validators 对象来创建表单验证规则。
接下来，我们将添加一些表单验证规则，以确保用户在提交数据之前输入了正确的数据。
-- -------------------- ---- -------
------ -
---------------------
---------------
-----------------
-----------
- ---- -------------
----- --------- - ------------------------------ -
----- ---
------ ---
-------- ---
-- -
----------- -
----- ----------------------
------ --------------------- ------------------
--
---在上面的代码中，我们添加了两个验证规则。一个是 required 验证规则，该规则确保用户已经输入了该字段的值。另一个是 email 验证规则，该规则确保用户输入的电子邮件地址格式正确。
接下来，我们需要在 UI 中反映出这些验证规则。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------------
------ -
---------------------
---------------
-----------------
-----------
- ---- -------------
------ -
----------
------------
----------
-------
-----
- ---- ------------------
----- ------ - -- -- -
----- -------- - --------------
----- --------- - ------------------------------ -
----- ---
------ ---
-------- ---
-- -
----------- -
----- ----------------------
------ --------------------- ------------------
--
---
----- ------------ - --- -- -
-------------------
-- ------------------- -
----------- --------- ---------------
- ---- -
------------- ---- --- --- -------- ---------
-
--
------ -
----- ------------------------
----------
----------------
------------------------------------------- -- --------------------------------
-
---------------------------
------------
-----------
------------------
-------------------------------------
------------- -- ---------- ----- -------------- -------- -------------- ---
------------------------------------------- -- ---------------------------------
--
--------------------- ---------------
----------------------------------------- ------ -- -
---- -----------------------
---
-----------------------
------------
----------
-----------------
-------------------------------------------- -- ---------------------------------
-
----------------------------
------------
------------
-------------------
--------------------------------------
------------- -- ---------- ----- --------------- -------- -------------- ---
-------------------------------------------- -- ----------------------------------
--
--------------------- ---------------
------------------------------------------ ------ -- -
---- -----------------------
---
-----------------------
------------
---------- --------------------
------------------------------
------------
-------------
---------------------
----------------------------------------
------------- -- ---------- ----- ----------------- -------- -------------- ---
--
------------
------- -----------------------------
-------
--
--
------ ------- -------在上面的代码中，我们创建了 handleSubmit 函数来处理表单提交。如果表单有效，则通过 alert 提示用户表单成功提交。否则，我们将提示用户填写所有必填字段。
为了让用户知道哪些字段未通过验证，我们在表单控件中使用 isInvalid 属性。这个属性是布尔类型的，true 表示该字段未通过验证。
最后，我们还附加了一个反馈组件，以向用户显示哪些字段未通过验证。
结论
在本文中，我们介绍了如何使用 Ngrx-form 管理 React 应用中的表单状态和验证。通过使用这个库，可以简化表单的状态和验证管理，并提高应用的可维护性和可扩展性。我们希望这篇教程对你有所帮助，并期待看到你构建更强大的表单应用的创作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005749881e8991b448ea199