介绍
在前端应用中，表单是非常常用的组件。ngrx-componentmodelformdefinitions 的目的是为 Angular 中的 ngrx-forms 库提供模型驱动的表单定义，从而使表单定义更加简洁易用。
安装
在项目中使用 npm 包管理工具进行安装：
npm install ngrx-componentmodelformdefinitions --save
使用
创建表单
可以使用 ModelFormDefinition.create 方法构建表单定义：
-- -------------------- ---- -------
------ - ------------------- - ---- -------------------------------------
----- ------- - ------------------------------------
---------- - -------- ------ --
--------- - -------- ----- --
------ -
----------- -
--------------------
----------------
-
--
--------- -
----------- -
--------------------
------------------------
-
-
---此代码段将创建一个具有四个字段的表单，如下所示：
interface MyForm {
firstName: string;
lastName: string;
email: string;
password: string;
}在这个示例中，firstName 和 lastName 都没有验证器，并且初始化值都是 John Doe。email 和 password 都有验证器，并且它们的值都是空的。
构建表单控件
可以使用 toControlConfig 方法将表单定义转换为 ngrx-forms 库可以使用的控件配置：
import { FormGroupState } from "@ngrx/forms";
const formState = FormGroupState.createFromState(formDef.toControlConfig());此代码段将创建一个 FormGroupState 控件，可以用于创建表单的 HTML。FormGroupState 控件是一个状态管理对象，它跟踪了表单中所有输入字段和验证器的状态。
为表单添加交互
可以将 FormGroupState 控件的状态作为参数传递给表单组件：
-- -------------------- ---- -------
------------
--------- --------------------
------------ --------------------------
--
----- --------------- -
----------- -----------------------------------
------------------- ------ ---------------- -
--------------- - ------------------ -- --------------
-
---------- -
-- --------
-
-在这个示例中，formState$ 是通过 Observable<FormGroupState<MyForm>> 的方式进行定义，这样可以让表单组件监听表单状态的变化，并在表单状态变化时进行更新。
在模板中使用表单
在模板中，可以利用 ngrx-forms 库的 formGroup 指令将表单关联到 Angular 组件，如下所示：
<form [formGroup]="formState$ | async" (ngSubmit)="onSubmit()"> <input formControlName="firstName" type="text" placeholder="First Name"> <input formControlName="lastName" type="text" placeholder="Last Name"> <input formControlName="email" type="email" placeholder="Email"> <input formControlName="password" type="password" placeholder="Password"> <button type="submit">Submit</button> </form>
在 Angular 中初始化
在 Angular 应用程序的根模块中，需要导入 FormsModule 和 ReactiveFormsModule 模块，以确保 ngFor 和 formGroup 指令可以正常工作：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - -------------------- ----------- - ---- -----------------
-----------
-------- -
--------------------
------------
-
--
------ ----- --------- --示例代码
下面是一个完整的示例代码，包括组件、表单定义、状态管理和模板：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - -------------- - ---- --------------
------ - ---------- - ---- ------------------
------ - ---------- - ---- -----------------
------ - ------------------- - ---- -------------------------------------
--------- ------ -
---------- -------
--------- -------
------ -------
--------- -------
-
----- ------- - ------------------------------------
---------- - -------- ------ --
--------- - -------- ----- --
------ ------------- -
--------------------
----------------
---
--------- -
----------- -
--------------------
------------------------
-
-
---
------------
--------- --------------------
------------ --------------------------
--
------ ----- --------------- -
----------- -----------------------------------
------------------- ------ ---------------- -
--------------- - ------------------ -- --------------
-
---------- -
-- --------
-
-
--------- -------- -
------- -----------------------
-
----- ------------- -------- - -
------- ---------------------------------------------------------
--<form [formGroup]="formState$ | async" (ngSubmit)="onSubmit()"> <input formControlName="firstName" type="text" placeholder="First Name"> <input formControlName="lastName" type="text" placeholder="Last Name"> <input formControlName="email" type="email" placeholder="Email"> <input formControlName="password" type="password" placeholder="Password"> <button type="submit">Submit</button> </form>
总结
通过使用 ngrx-componentmodelformdefinitions 库，可以更容易地构建模型驱动的表单，在视图和状态之间实现解耦合。此外，由于 ngrx-forms 库是一个基于观察者模式的库，因此还可以将表单状态绑定到其他状态，从而可以更加轻松地处理表单的状态管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e7d9381d61a3540b3e