Как привязать динамически созданный input к FormGroup?

Question

[Kovalsky]

В продолжение предыдущего вопроса: существует некая иерархическая структура которая описывает относительно сложную форму, которая в свою очередь может состоять из input'ов, контейнеров и других элементов. Контейнеры могут быть вложенные, то есть структура не фиксированной глубины. Выглядит она упрощенно как-то так:

{
  "type": "HorizontalLayout",
  "margin": false,
  "children": [
    {
      "type": "TextField",
      "id": "code",
      "caption": "Code of product",
      "width": "100px"
    },
    {
      "type": "NumberField",
      "id": "amount",
      "caption": "Amount of pieces"
    }
  ]
}

Из этой структуры я генерирую набор элементов который потом вставляю в нужное место, но тут возникает проблема с привязкой элементов формы к FormGroup. Собственно в этом и вопрос: как привязать input к существующей FormGroup если он был добавлен с помощью createElement/append?

Answer 1

[Антон Швец]

готовые решения не устраивают? ngx-formly например.
пользоваться createElement стоит в последнюю очередь. Можно накостылить свою фабрику элементов, которая при создании инпута будет привязывать их к форм-контролу через события, но это просто означает делать за ангуляр его работу.

Непонятно что у вас за многоуровневые структуры, но их наверно ограниченное число и для них можно сделать свои аксессоры с шаблонами.

Comments

[Kovalsky]

Никак не могу в примерах к ngx-formly найти обработку вложенных структур. Вижу группировку, вижу динамическое добавление полей, вижу кастомные шаблоны, а больше одного уровня и группировки ничего не вижу. Хотя документация такая основательная, что вполне мог что-то упустить.

В каком смысле непонятно что за структуры? Вон там в вопросе есть пример структуры. Она конечно плоская по отношению к группам полей, но вместо любого объекта можно поставить любой родительский объект, тогда получится более сложный пример:

{
  "type": "HorizontalLayout",
  "margin": false,
  "children": [
    {
      "type": "TextField",
      "id": "code",
      "caption": "Code of product",
      "width": "100px"
    },
    {
      "type": "NumberField",
      "id": "amount",
      "caption": "Amount of pieces"
    },
    {
      "type": "HorizontalLayout",
      "margin": false,
      "children": [
        {
          "type": "TextField",
          "id": "code",
          "caption": "Code of product",
          "width": "100px"
        },
        {
          "type": "NumberField",
          "id": "amount",
          "caption": "Amount of pieces"
        },
        {
          "type": "SomeContainer",
          "some_property": "some value",
          "children": [
            {
              "type": "AnotherFancyWrapper",
              "fancy_wrapper_property": "yeah, it can have properties too",
              "children": [
                {
                  "type": "HorizontalLayout",
                  "margin": false,
                  "children": [
                    {
                      "type": "TextField",
                      "id": "code",
                      "caption": "Code of product",
                      "width": "100px"
                    },
                    {
                      "type": "NumberField",
                      "id": "amount",
                      "caption": "Amount of pieces"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

[Антон Швец]

Kovalsky, так вот же ты где "кастомные шаблоны" положил ссылку на пример вложенной формы :)

[Kovalsky]

Антон Швец, так-то да, в их документации этот пункт подписан фразой "This example demonstrates how to nest formly-form's using custom templates", но по факту там не вложенные формы, там всё та же группировка полей, просто одна группа обернута в компонент PanelWrapperComponent. Собственно это вполне может быть решением, хотя тогда придётся мутить хренову тучу компонентов-обёрток под каждый случай. Спасибо, буду любоваться на документацию к ngx-formly в надежде найти решение.

[Антон Швец]

Kovalsky, ну оно конечно не самый гибкий инструмент, можно самому закостылить на динамических компонентах, если формли не устроит, сначала построить паралелльно форм-групп и схему хранящую визуальные какие-нибудь данные.
Вот есть либа где можно для динамики указывать биндинги сразу в шаблоне https://github.com/IndigoSoft/ngxd
Поудобнее чем дефолтный способ, который предлагает ангуляр.

Answer 2

[Kovalsky]

В итоге я бросил идею генерировать элементы ввода с помощью document.createElement/append, теперь их генерацией занимается рекурсивно вызываемый сложный шаблон, в котором эти поля и привязаны к экземпляру FormGroup (решение описано тут).