Как я могу динамически изменить идентификатор формы в формах ngrx?

Question

Этот вопрос касается ngrx-форм

Как динамически изменить идентификатор формы в формах ngrx?

У меня есть список табличных данных. Каждая из строк в таблице содержит информацию о различных продуктах. (в каждой строке вы можете видеть разные продукты с разными атрибутами).

КАЖДЫЙ СТРОК - НОВЫЙ ПРОДУКТ

Таким образом, у каждой из этих строк есть опция редактирования. Таким образом, при щелчке он всплывает и заполняет соответствующие элементы управления формы, которые пришли вместе с продуктом (из строки таблицы). Здесь пользователь может редактировать данные конкретного продукта. & save.

Когда пользователь закрывает после сохранения формы ( Эта форма является боковой панелью ) и открывает другой продукт, значения из формы предыдущего продукта сохраняются в текущей открытой форме.

Я чувствую, что это потому, что форм-идентификаторы одинаковы. Поэтому, чтобы предотвратить это, я думаю, что единственный способ - динамически назначать новые formIds, когда пользователь нажимает на каждую кнопку редактирования.

Есть ли способ сделать это?

Если это невозможно, я думаю, что иначе имеет динамическое добавление вложенных форм в родительскую форму. Но это приведет к тому, что родительское дерево форм будет расти каждый раз, когда пользователь нажимает кнопку «Редактировать продукт».

Но если нам это нравится, то что, если мы захотим добавить элементы управления Dynami c для некоторого подчиненного свойства внутри этих вновь созданных подчиненных форм? ?

... что-то вроде вложения FormGroupState (child) внутри другого FormGroupState (parent), который затем становится дочерним по отношению к родительской подчиненной форме.

Я знаю, это немного сложно. Но есть ли способ обойти?

Answer 1

Автор ngrx-форм здесь.

Я вижу несколько вариантов:

1) сбросить / воссоздать форму всякий раз, когда боковая панель закрыта / открыт. Это самое простое решение, так как оно позволяет вам использовать одно состояние формы без каких-либо идентификационных данных. чтобы сделать это, либо добавьте обработчик в редуктор формы для вашего closeSidebarAction (если у вас уже есть подобное действие), либо создайте новое действие. внутри редуктора для этого действия просто используйте formState: createFormGroup('MY_FORM_ID', initialValue), чтобы полностью сбросить состояние формы.

2) позвольте ngrx-forms управлять всеми формами, создавая один большой массив форм, который содержит все формы продукта , Таким образом, каждый продукт будет иметь свое состояние формы. Я не являюсь поклонником этого дизайна, поскольку концептуально такой родительской формы не существует, но вместо этого каждая форма продукта должна быть независимой.

3) самостоятельно создавать и управлять одним состоянием формы для каждого продукта. затем вы можете использовать productId или что-то подобное в качестве части идентификатора формы. это позволяет сохранить состояние формы одного продукта, даже если пользователь переключается на другой продукт и начинает его редактирование.

В целом, я считаю, что вариант 1 - это то, что вам нужно. Надеюсь, это поможет.