Как обработать XML в качестве шаблона?

Question

[Kovalsky]

Суть такова: на сервере хранятся XML-структуры, приблизительно такие:

example.xml

<Container Id="accordion">
	<VerticalLayout Margin="true" Spacing="true" PanelCaption="Основные атрибуты">
		<HorizontalLayout Margin="false" Spacing="true">
			Some content
		</HorizontalLayout>
	</VerticalLayout>
</Container>

Эти структурки надо будет скачать с сервера и использовать в качестве шаблона, то есть разместить в теле какого-нибудь топового компонента и рассчитывать на то, что будут корректно инициализированы используемые компоненты (в данном случае это `VerticalLayout`, `HorizontalLayout` и `Container`). Говоря "корректно" я имею в виду, что эти компоненты будут инициализированы абсолютно так же, как если бы эта структура была статическим шаблоном в каком-нибудь компоненте.

Сначала мне показалось, что это о Dynamic Component Loading, но чо-то в статье не нашёл инфы по теме. Будет вообще шикарно если подскажете как в терминологии ангуляра называется подобная гимнастика с шаблонами. Заранее большое спасибо!

Comments

[Gennady S]

Dynamic Component Loading — речь идет только о собранных в JavaScript компонентах, и они должны быть загружены (и объявлены в модуле), а подгружать с сервера Angular может только модули, и они так же должны быть собраны в JavaScript. Возможно Вам удастся каким-то образом такие компоненты собирать налету в модули, на стороне сервера, но сильно сомневаюсь, что это верное решение.

[Kovalsky]

Gennady S, да, мне тоже пока не очень понятно насколько это адекватный подход, но других вариантов нет кажется, т.к. формы невероятно сложные, и их - тысячи. Кроме динамической компиляции шаблонов не вижу вариантов

Answer 1

[Gennady S]

Как следует из комментариев, задача отображать множественные формы. Источник форм не столько важен: создают их вручную, с инструментарием или они генерируются автоматически. Решить динамической загрузкой в Angular будет сложно (а тем более связать в MV*, обрабатывая в контроллере/модели компонента), следовательно, напрашивается другой подход к визуализации форм средствами статически-собранного приложения. Попробуйте решить это посредством мета-данных форм. Пусть форма будет представлена описанием полей, скажем, JSON или XML, и единый (и сложный) шаблон Angular будет заниматься генерацией, грубо говоря, что-то вроде этого:

formElementsList = [ { type: "text", label: "Поле ввода", value: null } ];

<div *ngFor="let element of formElementsList">
  <div *ngIf="element.type == 'text'">
    <label>{{ element.label }}:
      <input [(ngModel)]="element.value" />
    </label>
  </div>
</div>

Ограничений у этого подхода нет, можно создать форму любой сложности, с иерархией и вложенностью.

Comments

[Kovalsky]

В принципе да, такая динамика вроде как должна подойти, но надо сначала посмотреть на шаблоны форм, возможно там не только такие простые случаи бывают. Спасибо

[Gennady S]

Никита Полевой, обычно таким образом динамические формы и строят, например, для модели EAV в интернет-магазинах, где у разных товаров различный набор свойств. Если в Вашем случае формы хранятся как шаблоны, возможно это не лучший подход. Их ведь сложнее редактировать, чем структуру данных, описывающую форму. Для изменения шаблона его придется парсить в структуру данных в любом случае. Тогда как структура удобно ложится на многие движки. PS Если ответ выше устраивает, отметьте, пожалуйста, "ответом" на вопрос.

[Kovalsky]

Так, а если для каждого элемента формы нужно иметь инстанс соответствующего компонента, то как это сделать при таком подходе? Речь о componentFactoryResolver?

[Gennady S]

Никита Полевой, самое простое, "в лоб", это выборка по условиям в статике *ngIf / *ngElseIf, если элементов-компонентов форм десятки, то есть смысл подумать о динамической подгрузке (это же может оказаться решением для иерархии, вложенных групп элементов). Думаю, да, ComponentFactoryResolver, вполне решение, и возможно не единственное.

[Kovalsky]

Gennady S, еще раз уточню: предполагается что-то типа такого?

[Gennady S]

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

[Kovalsky]

Gennady S, в общем я потратил кучу времени на эту фигню и так и не пришел к решению. В чем суть: структура описывающая форму - не плоская. Она может содержать всяческие там контейнеры, в которых могут находиться элементы ввода, а могут находиться и другие контейнеры, а может быть и то и другое. Соответственно, таким вот простым шаблончиком не отделаешься. Но тут возникает другая проблема: ангуляр походу умеет привязывать инпуты к FormGroup только если эти инпуты рендерятся в шаблоне, то есть у меня никак не получилось привязать инпуты к FormGroup если они добавлены просто с помощью createElement/append.

Получается вот что: с одной стороны я не могу придумать как в шаблоне обработать многоуровневую структуру, с другой стороны - если обрабатывать многоуровневую структуру не в шаблоне, а циклом в компоненте, то тогда хрен привяжешь элементы ввода к форме. Такие дела.

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

[Gennady S]

Kovalsky, уверен, верный путь это визуализация структуры данных из контроллера, тут не должно возникать ограничений на вложенность. Не видя Ваших вариантов сложно сказать, как тут можно / нельзя воспользоваться @angular/forms , но может быть есть смысл создать собственный обработчик форм, например, использовать отдельные FormControl в динамически создаваемых элементах или не использовать их вовсе, обойдясь привязкой к полям структуры как в примере выше ngModel="element.value".

[Kovalsky]

Gennady S, да, и правда ведь можно было не париться с FormGroup. Но я всё же хотел пользоваться ангулярной системой асинхронной валидации, поэтому я все сделал с помощью рекурсии по советам Ben Nadel (всё опишу в ответе).

В итоге сделано почти как вы сказали: из XML нужная инфа выдрана в JSON, а в шаблоне компонента TreeNodeComponent описан почти один в один ваш алгоритм.

Большое спасибо вам за помощь и ваше время! Задача решена благодаря вашим концептам

Answer 2

[Kovalsky]

В итоге задача решена почти так как и предложил Gennady S: данные из XML переведены в JSON, получившаяся структура обрабатывается с помощью компонентов, которые рекурсивно вызывают друг друга (сделано по материалам из статейки Ben Nadel: Playing With Recursive Components in Angular). В каждый из этих компонентов явно передается ссылка на экземпляр FormGroup, таким образом все поля ввода без проблем могут быть привязаны к одной форме.

Пример структуры описывающей форму

{
  "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"
        }
      ]
    }
  ]
}

Часть main.component.html

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

Часть main.component.ts

// создаём форму
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));
});

TreeComponent

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;
  }
}

TreeNodeComponent

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;
  }
}