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

153 views Asked by At

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" } 
}
2

There are 2 answers

0
Webia1 On

Some minor adjustments are required:

  1. Begin by adding a suitable type definition for the model:
export type FormModel = {
  inventories: {
    [index: number | string]: string;
  };
};
  1. Next, make a slight modification to your method:
  changeModel() {
    this.model = {
      inventories: {
        text: 'new text',
      },
    };
  }

>> See Stackblitz Example Online

0
Bhavy Ladani On

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