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存储库中放置的对象的非常特定的部分发生变化。

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

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

1 个答案: