0

I'm building a multi step form using angular 6 FormBuilder. Currently the routing structure is as follows:

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'}}
  ]
},
];

and I ran into a problem while implementing this i.e. when the user interacts on /path1 page and adds a dynamic form field and then moves on to next page (/path2) using the Next button and returns back to /path1 page then he was not able to see the dynamically added form fields as those are added only when the user clicks on add button. My generated form is similar to the form seend here http://angular-multi-step-wizard.azurewebsites.net/#/personal, but a very complicated and nested one than that.

Solution I am looking of is how to save dynamically added form fields and pre-populate the user added inputs once he/she returns back to previous page.

Thanks for your help and support !

Raj
  • 125
  • 3
  • 17

1 Answers1

0

I am building something very similar. You can use NgRx here, and save data to the store every time the user clicks Next or Previous.

However, with my project, there are some complex fields within each page that only mutate a very specific part of the Object placed in the NgRx store.

This led me to create a custom service based on the BehaviourSubject class. I dispatch data to the service which then adds it to the BehaviourSubject property of the service, and within each page i subscribe to the BehaviourSubject property of the service, and if the value(s) are not null I patch my ReactiveForm accordingly.

7ahid
  • 420
  • 1
  • 5
  • 12
  • Any sample repo would be great !! – Raj Jul 02 '18 at 18:33
  • @Raj I don't have a sample repo but [this guide](https://www.technouz.com/4776/custom-angular-application-state-service-with-behavioursubject/) I wrote may help. – 7ahid Jul 03 '18 at 10:21