Angulrar formly fieldGroup is not working for field with key as integer

Question

Angular formly fieldGroup should the object but it is returning the array as value.

as per formly field config, inventories property in model object should be in object but it is giving array.

package.json

    "@ngx-formly/bootstrap": "^6.1.2",
    "@ngx-formly/core": "^6.1.2",

app.component.html

<form [formGroup]="form" (ngSubmit)="submit()">
  <formly-form
    [model]="model"
    [fields]="fields"
    [options]="options"
    [form]="form"
  ></formly-form>
  <button type="submit" class="btn btn-primary submit-button">Submit</button>
  <button type="button" class="btn btn-default" (click)="options.resetModel()">
    Reset
  </button>
</form>

<p>{{ model | json }}</p>
<!-- Copyright 2021 Formly. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at https://github.com/ngx-formly/ngx-formly/blob/main/LICENSE -->

app.component.ts

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'formly-app-example',
  templateUrl: './app.component.html',
})
export class AppComponent {
  form = new FormGroup({});
  model: any = {};
  options: FormlyFormOptions = {
    formState: {
      awesomeIsForced: false,
    },
  };

  fields: FormlyFieldConfig[] = [
    {
      key: 'inventories',
      fieldGroup: [
        {
          key: '3',
          type: 'input',
          props: {
            label: 'Text',
            placeholder: 'Formly field 3',
            required: true,
          },
        },
        {
          key: '4',
          type: 'input',
          props: {
            label: 'Text',
            placeholder: 'Formly field 3',
            required: true,
          },
        },
      ],
    },
  ];

  submit() {
    if (this.form.valid) {
      alert(JSON.stringify(this.model));
    }
  }
}

below is OutPut of model from above code ( looks like error)

{ "inventories": [ null, null, null, "22", "33" ] }

Expected output for form model.

{ 
  "inventories": {"3": "22", "4": "33" } 
}

Answer 1

Some minor adjustments are required:

1. Begin by adding a suitable type definition for the model:

export type FormModel = {
  inventories: {
    [index: number | string]: string;
  };
};

2. Next, make a slight modification to your method:

  changeModel() {
    this.model = {
      inventories: {
        text: 'new text',
      },
    };
  }

>> See Stackblitz Example Online

Answer 2

Update your submit function.

submit() {
  if (this.form.valid) {
    const inventoriesObj = this.model.inventories.reduce((acc, value, index) => {
      acc[index + 3] = value;
      return acc;
    }, {});

    this.model.inventories = inventoriesObj;
    console.log(JSON.stringify(this.model);)

    //alert(JSON.stringify(this.model));
  }
}

Try this and let me know how it works