时间戳

首页 > 解决方案 > 如何管理状态并跟踪在 Angular 中填写的多个表单？

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

问题描述

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

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

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

这是代表

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

标签： angularreduxrxjsangular-formsstate-management

解决方案

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

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

// interface

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

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

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

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

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

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

推荐阅读