Angular 6 Multi Step Dynamic Forms - 保存动态添加的表单字段和数据

Question

我正在使用 Angular 6 FormBuilder 构建一个多步骤表单。目前路由结构如下：

const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component:HomePageComponent,
  children: [

    {path: '', redirectTo: 'path', pathMatch: 'full'},
    { path: 'path', component: FormsContainerComponent , data: {channel:'path'}},
    { path: 'path2', component: FormsContainerComponent, data: {channel:'path2'}},
    { path: 'path3', component: FormsContainerComponent, data: {channel:'path3'}},
    { path: 'path4', component: FormsContainerComponent, data: {channel:'path4'}}
  ]
},
];

我在实现这个时遇到了一个问题，即当用户在 /path1 页面上进行交互并添加一个动态表单字段，然后使用 Next 按钮移动到下一页 (/path2) 并返回到 /path1 页面然后他无法看到动态添加的表单字段，因为只有当用户单击添加按钮时才会添加这些表单字段。我生成的表单与这里看到的表单http://angular-multi-step-wizard.azurewebsites.net/#/personal 相似，但比这更复杂和嵌套。

我正在寻找的解决方案是如何保存动态添加的表单字段并在用户返回上一页后预先填充用户添加的输入。

感谢您的帮助和支持！

Answer 1

我正在构建一些非常相似的东西。您可以在此处使用NgRx，并在用户每次单击“下一步”或“上一个”时将数据保存到存储中。

但是，在我的项目中，每个页面中都有一些复杂的字段，它们只会改变放置在 NgRx 存储中的 Object 的一个非常特定的部分。

这导致我创建了一个基于 BehaviourSubject 类的自定义服务。我将dispatch 数据添加到服务，然后将其添加到服务的BehaviourSubject 属性，并在每个页面中将subscribe 添加到服务的BehaviourSubject 属性，如果值不是@ 987654329@ 我相应地修补了我的ReactiveForm。