Как создать многомерный угловой 4 FormArray?

Я создаю динамическую форму с помощью инструмента ng-formly npm. Я хочу, чтобы эта форма была разделена на разделы и вкладки, но по-прежнему имела одну кнопку отправки. т.е. одиночный тег. Теперь я согласно документации этой библиотеки. Я создал этот интерфейс под названием TabType, который содержит поля различий для конкретной вкладки.

      export interface TabType {
            label: string;
           fields: FormlyFieldConfig[]
        }

Теперь, используя указанные ниже переменные и схему, я могу сгенерировать форму, которая разделена на разные разделы, используя указанный выше интерфейс TabType.

       form = new FormGroup({});
      model = {};
           options: FormlyFormOptions = {};


       tabs: TabType[] = [
{
  label: 'Personal data',
  fields: [

      {
        className: '',
        template: '<strong>Basic Information:</strong>',
      },

         {
            fieldGroupClassName: '',
            fieldGroup: [
              {
                className: 'mdc-text-field__input',
                type: 'input',
                key: 'firstName',
                templateOptions: {
                  label: 'First Name',
                },
               },

              {
                className: 'mdc-text-field__input',
                type: 'input',
                key: 'lastName',
                templateOptions: {
                  label: 'Last Name',
                },
                expressionProperties: {
                  'templateOptions.disabled': '!model.firstName',
                },
              },
            ],
        },


{
  className: '',
  template: '<strong>Address:</strong>',
},
{
  fieldGroupClassName: '',
  fieldGroup: [
    {
      className: 'row',
      type: 'input',
      key: 'street',
      templateOptions: {
        label: 'Street',
      },
    },
    {
      className: 'mdc-text-field__input',
      type: 'input',
      key: 'cityName',
      templateOptions: {
        label: 'City',
      },
    },
    {
      className: 'mdc-text-field__input',
      type: 'input',
      key: 'zip',
      templateOptions: {
        type: 'number',
        label: 'Zip',
        max: 99999,
        min: 0,
        pattern: '\\d{5}',
      },
    },
  ],
},


 {
  className: '',
  template: '<strong>Other Inputs:</strong>',
},
{
  type: 'textarea',
  key: 'otherInput',
  templateOptions: {
    label: 'Other Input',
  },
},
{
  type: 'checkbox',
  key: 'otherToo',
  templateOptions: {
    label: 'Other Checkbox',
  },
},


  ],
},


{
  label: 'Destination',
  fields: [
    {
      key: 'country',
      type: 'input',
      templateOptions: {
        label: 'Country',
        required: true,
      },
    },
  ],
},
{
  label: 'Day of the trip',
  fields: [
    {
      key: 'day',
      type: 'input',
      templateOptions: {
        type: 'date',
        label: 'Day of the trip',
        required: true,
      },
    },
  ],
},
 ];

Теперь, после создания этой переменной, я создаю One FormArray, называемый «формой», вот так:

      form = new FormArray(this.tabs.map(() => new FormGroup({})));

Наконец, в файле HTML у меня есть код ниже, который анализирует вкладку, а также TabType, называемый массивом вкладок, и получает доступ к нужным полям формы для его визуализации.

                     <div class="mdc-card">
                          <section class="mdc-card__primary view-section">
                              <h3>{{tab.label}}</h3>
                          </section>
                          <section class="mdc-card__supporting-text view-section-body">

                               <formly-form 
                                [form]="form.at(index)"
                                [model]="model"
                                [fields]="tab.fields"
                                [options]="options">
                              </formly-form>

                          </section>
                      </div>
                  </div>

Now I want to do one more iteration over the form elements and want to divide the fields in tabs. In above you can see it is creating sections.

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

Может кто-нибудь подскажет, как это сделать?

Обновлять :

        form = new FormArray(this.tabs.map(() => new FormGroup({})));

               const baseForm: FormGroup = this.fb.group({
         tabs: this.fb.array([this.form,this.form,this.form])
          }) 

Теперь в приведенной выше baseForm есть данные всех трех вкладок (хотя и идентичны). Можете ли вы помочь передать его как массив, чтобы я мог перебирать его, потому что я не думаю, что могу перебирать объект formgroup в html.