Пользовательская анкета с перетаскиванием

Я создаю индивидуальную анкету. С левой стороны у меня есть ИНСТРУМЕНТЫ (ввод, выбор и т. Д.), А с правой стороны - зона DROP ...

Мне нужно создать форму анкеты с помощью этих инструментов формы и сохранить ее в API (для теста в хранилище сеанса) ... Когда я перетаскиваю, скажем, INPUT, в зоне перетаскивания я получаю исходный код ... Вы можете увидеть это в примере здесь < / а>

Итак, мой вопрос: как лучше всего это сделать?

Что я пробую:

  • Создайте повторно используемый компонент (компонент ввода, компонент текста, компонент выбора ...) и дайте уникальный идентификатор каждому компоненту, а в зоне DRAG с помощью цикла * ngFor для всех компонентов. Но я получаю только исходный код, как в примере

  • Кроме того, чтобы сохранить эти выбранные компоненты и / или показать их для редактирования снова, когда я получу их из API. Как это сделать?


person Arter    schedule 28.01.2020    source источник


Ответы (1)


Попробуйте создать компонент формы, который будет содержать всю вашу логику редактирования / создания. @Input - это ваш объект анкеты (редактировать) или null (создавать). Логика перетаскивания должна быть снаружи (в вашем компоненте списка). Также подумайте об отношениях между ними, создайте сервис, который будет уведомлять компонент списка, когда элемент редактируется / создается.

person kuklyy    schedule 28.01.2020
comment
хороший момент ... у вас есть пример? что-то похожее, потому что я пытаюсь найти что-то похожее, но ничего не подходит для того, что мне нужно - person Arter; 28.01.2020
comment
есть ли проблема с реализацией перетаскивания или повторно используемыми компонентами? - person kuklyy; 28.01.2020
comment
Я знаю, как это сделать с многоразовыми компонентами .... проблема в перетаскивании - person Arter; 28.01.2020
comment
stackblitz. ru / edit / в mat-tree есть функция перетаскивания, с которой можно поиграть - person kuklyy; 28.01.2020
comment
thnx, но я не могу найти в этом примере, почему в зоне DROP показать мне исходный код - person Arter; 28.01.2020