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

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 页面上交互并添加一个动态表单字段，然后使用下一步按钮移动到下一页 (/path2( 并返回/path1 页面然后他无法看到动态添加的表单字段，因为这些表单字段仅在用户单击添加按钮时添加。我生成的表单类似于此处 http://angular-multi-step-wizard.azurewebsites.net/#/personal 的表单，但比这更复杂且嵌套。

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

感谢您的帮助和支持！

Answer 1

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

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

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