Kovalsky

{
  "type": "Container",
  "id": "filter",
  "children": [
    {
      "type": "HorizontalLayout",
      "spacing": true,
      "children": [
        {
          "type": "TextField",
          "id": "code",
          "caption": "Код",
          "width": "100px"
        },
        {
          "type": "TextField",
          "id": "label",
          "caption": "Наименование",
          "width": "200px"
        },
        {
          "type": "TextField",
          "id": "days",
          "caption": "Дней",
          "width": "100px"
        },
        {
          "type": "TextField",
          "id": "months",
          "caption": "Месяцев",
          "width": "100px"
        },
        {
          "type": "Check3Box",
          "id": "isActive",
          "caption": "Активен",
          "height": "20px",
          "alignment": "bottom_left"
        },
        {
          "type": "Check3Box",
          "id": "isAbsDeleted",
          "caption": "Удален в АБС",
          "height": "20px",
          "alignment": "bottom_left"
        }
      ]
    }
  ]
}

<ng-template [ngIf]="filterForm">
    <form [formGroup]="my_awesome_form">
        <my-tree [rootNode]="elements" [form]="my_awesome_form"></my-tree>
    </form>
</ng-template>

// создаём форму
public my_awesome_form = new FormGroup({});

// получаем описание лэйаута
public elements = some_data_service.getLayout();

// достаем из лэйаута только поля ввода
const inputs = Utils.deepFind(this.elements, 'caption', '');

// привязываем поля к форме
inputs.forEach((input) => {
    this.filterForm.addControl(input.id, new FormControl(null));
});

import {Component} from "@angular/core";
import {LayoutElement} from "@toolkit/models/layout.model";
import {FormGroup} from "@angular/forms";

@Component({
  selector: "my-tree",
  inputs: [
    "rootNode",
    "form"
  ],
  outputs: [],
  template: `<my-tree-node [node]="rootNode" [form]="form"></my-tree-node>`
})
export class TreeComponent {
  public rootNode: LayoutElement | null;
  public form: FormGroup;

  constructor() {
    this.rootNode = null;
  }
}

import {Component} from "@angular/core";
import {LayoutElement} from "@toolkit/models/layout.model";
import {FormGroup} from "@angular/forms";

@Component({
  selector: "my-tree-node",
  inputs: [
    "node",
    "form"
  ],
  outputs: [],
  template:
      `
      <ng-template [ngIf]="node && node.type">
          <span [ngSwitch]="node.type" [formGroup]="form">
              <!-- пример создания контейнера -->
              <div *ngSwitchCase="'Container'">
                  <div *ngIf="node.children">
                      <ng-template ngFor let-child [ngForOf]="node.children">
                          <my-tree-node [node]="child" [form]="form"></my-tree-node>
                      </ng-template>
                  </div>
              </div>
              <!-- пример создания поля ввода -->
              <ng-template [ngSwitchCase]="'TextField'">
                  <input type="text" [attr.placeholder]="node.caption" [formControlName]="node.id"/>
              </ng-template>
              <!-- обработка не зарегистрированного типа -->
              <div *ngSwitchDefault>
                  <div class="p-3 mb-2 bg-danger text-white">Element of type "{{ node.type }}" can't be processed!</div>
              </div>
          </span>
      </ng-template>
    `
})
export class TreeNodeComponent {
  public node: LayoutElement | null;
  public form: FormGroup;

  constructor() {
    this.node = null;
  }
}