Subform should have JSON field data nested inside subform object

[jeff-wursta]

Using the following libraries and versions:

"@data-driven-forms/mui-component-mapper": "^3.16.10",
"@data-driven-forms/react-form-renderer": "^3.16.10",

When using a subform component inside a larger schema, I would expect the fields within the subform to be nested inside a JSON object with the key being the name of the subform. Instead, all of the subform field data is inline with the top-level form fields.

Schema w/ simple form:

const schema = {
  fields: [
    {
      name: "formField",
      label: "Top Level Field",
      component: "text-field",
    },
    {
      component: "sub-form",
      title: "Subform",
      description: "This is a subform",
      name: "subform",
      fields: [
        {
          name: "subformField",
          label: "Sub Form Field",
          component: "text-field",
        },
      ],
    },
  ],
};

const SubFormTest = () => (
  <Grid spacing={4} container>
      <FormRenderer
        componentMapper={componentMapper}
        FormTemplate={FormTemplate}
        schema={schema}
        onSubmit={(data) => console.warn(data)}
        onCancel={() => console.log("Cancel action")}
      />
  </Grid>
);

Resulting output from onSubmit:

{
  formField: 'top level',
  subformField: 'sub form'
}

Expected output:

{
  formField: 'top level',
  subform: {
    subformField: 'sub form' 
  }
}

[rvsia]

Hello,

thanks for this proposal but subforms are now mostly just styling components and helpers to group fields (so you can hide them with a single condition, etc.)

You can achieve this behavior by using dot name notation in the nested fields: name: "subform.subformField",