Skip to content

Subform should have JSON field data nested inside subform object  #1221

@jeff-wursta

Description

@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' 
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions