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

Question

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

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

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

This is the representation

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

Answer 1

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

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

// interface

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

“保存”一个步骤实际上就是按索引更新数据并递增formStepIndex。

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

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

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

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