如何管理状态并跟踪在 Angular 中填写的多个表单？

Posted 2023-02-19

【中文标题】如何管理状态并跟踪在 Angular 中填写的多个表单？

【英文标题】：How to manage the state and keep a track for multiple forms being filled out in Angular?

【发布时间】：2020-12-20 22:52:36

【问题描述】：

在一个 Angular 10 应用程序中，我们目前有一个表单作为步进器 (1...2....3)， 用户可以在步骤 1、2 和 3 中填写表格，在步骤 3 中，我们发出 POST 请求以写入数据库并提供确认。

现在，我们希望用户能够从他离开的地方继续，用户可以开始填写新表单或能够从他/她离开的地方继续。

此外，用户一次可以填写多个表单，我们希望对其进行跟踪并显示正在进行的表单正在填写并从那里提取。

This is the representation

我们正在研究状态管理库，例如 RxJs、ngrx-store（Redux 模式），但这将是一个学习曲线，并且会增加复杂性，我们应该如何管理它？

【问题讨论】：

您可以使用 reactiveForm 和表单生成器。返回一个“表单实例”，您可以将这些表单实例保存在服务中。在用户离开应用或重新加载之前，您不会丢失您的信息

避免任何存储模式，如果您了解 Angular 依赖注入和共享服务，您将不会发现自己需要任何类型的 redux 样式存储。

@adrian-brand - 你可能有一个链接或其他扩展它的东西吗？我不确定我是否理解并希望听到更多信息。

【参考方案1】：

您的问题没有“正确”答案，只有方法。

我利用 Ngrx 采用的方法是通过索引保存每个步骤的状态：

// interface


  formStepIndex: number;
  formData: 
    0: IStep1Data;
    1: IStep2Data;
    2: IStep3Data;
  

“保存”一个步骤实际上只是通过索引更新数据并增加formStepIndex。

表单组件通过 Ngrx 选择器提供数据，该选择器使用 formStepIndex 访问当前步骤的数据。

这使我可以在通过 POST 到服务端点完成这些步骤之前向前或向后移动这些步骤。

如果您需要分步式工作流的多个实例，您当然可以扩展它以将上述所有数据保存在一个数组中。

IStep1Data 通常是一种类型，例如：Pick<IWhatever, 'field1' | 'field2', ...> 采用包含所有属性的“基本”接口，并将它们拆分为每个步骤所需的字段。