dynamic-form.service.v2.ts

import { Injectable } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Injectable({
    providedIn: 'root',
})

export class FormBuilderService {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  mount(component) {
    return {
      form: this.formControlTemplateBuilder(component),
      template: this.formControlBuilder(component),
    }
  }

  typeForm(component) {
      return component?.items ? 'items' : 'default';
  }

  private formControlBuilder(component) {
    const builder = {
      title: {
          text: [component?.text],
      },
      subtitle: {
          text: [component?.text],
      },
      product_card_item: component?.items?.map(item =>
          this.formBuilder.group({
              avatar: [item?.avatar],
              description: [item?.description],
              spotlight: [item?.spotlight],
              value: [item?.value],
          }),
      ),
    };

    return this.formBuilder.group({
      ...builder[component?.type],
    })
  }

  private formControlTemplateBuilder(component) {
    const builder = {
      title: [
        { component: 'input', props: [] }
      ],
      subtitle: [
        { component: 'input', props: [] }
      ],
      product_card_item: {},
    }
    return builder[component?.type] || null;
  }
}