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

问题描述

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

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

此外，用户可以一次填写多个表格，我们希望保持追踪，并显示正在填写的表格并从中取出。

This is the representation

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

解决方法

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

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

// interface

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

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

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

这使我可以前进或后退，直到通过POST到服务端点完成这些步骤为止。

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

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