Nested form fields values are not reflected on submit

Question

I am using ngx-formly in my project to create dynamic tab based forms.

i have a similar model like below:

model = {
    areas_data: [{
            "area_id": "someuuid",
            "description": "ewrwr",
            "nested": [
                {
                  "name":  'rerw',
                  "desc": 'ewe'
                }
            ]
    }]
  };

I have created form field structure using tabs and repeat example from demo. Here is stackblitz demo for the same Demo

I got one issue here whenever i try to open a nested element in other tab , the nested elements field values are not reflected on submit.

To reproduce issue:

Just click on Nested Button

Then in nested tab, model fields are not populating by default.

Any suggestions, what i am doing wrong here?

Thanks!!

Answer 1

I have got the answer, from @aitboudad, to pass fieldArray to nested without using the button:

{
      "key": "nested",
      type: 'repeat',
      fieldArray: {
        fieldGroup: [
          { "key": "name" },
          ....
        ]
      }
    }

To add a nested field for the current areas_data item https://stackblitz.com/edit/angular-v7rvwf-sf6oxt