Angular 6 Multi Step Dynamic Forms - Сохранение динамически добавленных полей формы и данных - PullRequest
Новая
       6

Angular 6 Multi Step Dynamic Forms - Сохранение динамически добавленных полей формы и данных

0 голосов
/ 02 июля 2018

Я строю многошаговую форму, используя угловой 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) с помощью кнопки Next и затем возвращается на страницу / path1. он не мог видеть динамически добавленные поля формы, так как они добавляются только тогда, когда пользователь нажимает кнопку добавления. Моя сгенерированная форма похожа на форму, приведенную здесь http://angular -multi-step-wizard.azurewebsites.net / # / personal , но очень сложная и вложенная.

Решение, которое я ищу, состоит в том, как сохранить динамически добавленные поля формы и предварительно заполнить добавленные пользователем данные, как только он вернется на предыдущую страницу.

Спасибо за вашу помощь и поддержку!

1 Ответ

0 голосов
/ 02 июля 2018

Я строю что-то очень похожее. Вы можете использовать NgRx здесь и сохранять данные в хранилище каждый раз, когда пользователь нажимает кнопку Далее или Предыдущий.

Однако в моем проекте есть несколько сложных полей на каждой странице, которые изменяют только очень специфическую часть Объекта, помещенную в хранилище NgRx.

Это привело меня к созданию пользовательского сервиса на основе класса BehaviourSubject. Я dispatch передаю данные службе, которая затем добавляет их к свойству BehaviourSubject службы, а на каждой странице я subscribe - к свойству BehaviourSubject службы, и если значения не являются null Я исправляю свой ReactiveForm соответственно.

...