How to bind a dynamically created input to a FormGroup?

Question

Angular

In continuation of the previous question : there is a certain hierarchical structure that describes a relatively complex form, which in turn can consist of inputs, containers and other elements. Containers can be nested, i.e. the structure is not fixed depth. It looks simplified like this:

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

From this structure, I generate a set of elements, which I then insert into the right place, but there is a problem with binding the form elements to the FormGroup. Actually, this is the question: how to bind input to an existing FormGroup if it was added using createElement/append?

Answer 1

Ready-made solutions do not suit? ngx-formly for example.
createElement is the last thing to use. You can create your own factory of elements, which, when creating an input, will bind them to the form control through events, but this simply means doing its work for the angular.
It is not clear what kind of multilevel structures you have, but there are probably a limited number of them and you can make your own accessors with templates for them.