xenial-black•2y ago

How to create a nested form?

I want to create a nested form and send data on API post request. How can I achieve that? For example I want to send a data in POST request as:

{
    "name": "person name",
    "user": {
        "phone_no": "1234567890",
        "email": "example@mail.com",
    },
    "office": [{
        "name": "office1",
        "registration_number": "123456",
        "address": [
            {
                "state": 3,
                "district": 28,
                "city": "Panauti",
                "tole": "Malpi"
            }
        ],
        "contact": [
            {
                "phone_no":"12343213",
                "is_primary": false
            }
        ]
    }]
}

{
    "name": "person name",
    "user": {
        "phone_no": "1234567890",
        "email": "example@mail.com",
    },
    "office": [{
        "name": "office1",
        "registration_number": "123456",
        "address": [
            {
                "state": 3,
                "district": 28,
                "city": "Panauti",
                "tole": "Malpi"
            }
        ],
        "contact": [
            {
                "phone_no":"12343213",
                "is_primary": false
            }
        ]
    }]
}

13 Replies

sensitive-blue•2y ago

Hey @dipbazz , you want a nested form? Or do you want to add these data before submit? If nested is not a form, this is for you https://refine.dev/docs/faq/#how-can-i-change-the-form-data-before-submitting-it-to-the-api

xenial-black•2y ago

My final outcome is to send the data as mentioned above. So, I was wondering if I could use field name in my form so that whenever I submit my form I get the expected json data.

sensitive-blue•2y ago

If you are going to supply all the data to your user, you should use a nested form. https://ant.design/components/form/#components-form-demo-dynamic-form-items

xenial-black•2y ago

Isn't there a way to structure my form as the expected JSON data. Like in my list view I can get the nested data using dataIndex={["office", "name"]}. So I would love to know the same way in form as well, maybe in my field name I could name as name={["office", "name"]} then the form data to be structured as

{
  "office": {
    "name": "office name"
  }
}

{
  "office": {
    "name": "office name"
  }
}

sensitive-blue•2y ago

Ok, I think the nested form will solve your problem. 🚀

xenial-black•2y ago

Ok, Let me try it out. Thank you for your response.

sensitive-blue•2y ago

Your welcome happy hacking refine

xenial-black•2y ago

Hey @yildirayunlu I am able to replicate the nested form for office but how can I achieve with the user based on the below format.

{
    "name": "person name",
    "user": {
        "phone_no": "1234567890",
        "email": "example@mail.com",
    },
    "office": [{
        "name": "office1",
        "registration_number": "123456",
        "address": [
            {
                "state": 3,
                "district": 28,
                "city": "Panauti",
                "tole": "Malpi"
            }
        ],
        "contact": [
            {
                "phone_no":"12343213",
                "is_primary": false
            }
        ]
    }]
}

{
    "name": "person name",
    "user": {
        "phone_no": "1234567890",
        "email": "example@mail.com",
    },
    "office": [{
        "name": "office1",
        "registration_number": "123456",
        "address": [
            {
                "state": 3,
                "district": 28,
                "city": "Panauti",
                "tole": "Malpi"
            }
        ],
        "contact": [
            {
                "phone_no":"12343213",
                "is_primary": false
            }
        ]
    }]
}

In my office form it has an array of object but in case of user it only consist of object as

 "user": {
    "phone_no": "1234567890",
    "email": "example@mail.com",
 },

 "user": {
    "phone_no": "1234567890",
    "email": "example@mail.com",
 },

sensitive-blue•2y ago

Hey @dipbazz you can override the onFinish method as in the first link I posted. I think you can solve the problem like the one below.

onFinish={(values) => {
    const { phone, email } = values;

    return (
        formProps.onFinish &&
        formProps.onFinish({
            ...values,
            user: {
                phone,
                email,
            }
        })
    );
}}

onFinish={(values) => {
    const { phone, email } = values;

    return (
        formProps.onFinish &&
        formProps.onFinish({
            ...values,
            user: {
                phone,
                email,
            }
        })
    );
}}

xenial-black•2y ago

Okay. Thank you. If you don't mind I would like to ask you one question. Now I am facing the issue with double nested on my form. As my office form has address nested inside of it. Can I achieve that again using the nested form inside of a nested form?

sensitive-blue•2y ago

I think you can nested as much as you want in nested forms. There is no restriction.

xenial-black•2y ago

I have nested it but while trying to submit the form my response will be like

{
  "office": [
      {
        "name": "",
        "registration_number": ""
     },
     "address": [{}]
  ]
}

{
  "office": [
      {
        "name": "",
        "registration_number": ""
     },
     "address": [{}]
  ]
}

Instead of

{
  "office": [
      {
        "name": "",
        "registration_number": "",
        "address": [{}]
     },
  ]
}

{
  "office": [
      {
        "name": "",
        "registration_number": "",
        "address": [{}]
     },
  ]
}

sensitive-blue•2y ago

You can do as in the example here. It will be nested if you add <Form.List name="address"> similarly to <Form.List name="offices">. We have never made such a form before. But I think Antd supports it.