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
flat-fuchsia
flat-fuchsia2y 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
quickest-silver
quickest-silver2y 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.
flat-fuchsia
flat-fuchsia2y 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
quickest-silver
quickest-silver2y 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"
}
}
flat-fuchsia
flat-fuchsia2y ago
Ok, I think the nested form will solve your problem. 🚀
quickest-silver
quickest-silver2y ago
Ok, Let me try it out. Thank you for your response.
flat-fuchsia
flat-fuchsia2y ago
Your welcome happy hacking refine
quickest-silver
quickest-silver2y 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",
},
flat-fuchsia
flat-fuchsia2y 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,
}
})
);
}}
quickest-silver
quickest-silver2y 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?
flat-fuchsia
flat-fuchsia2y ago
I think you can nested as much as you want in nested forms. There is no restriction.
quickest-silver
quickest-silver2y 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": [{}]
},
]
}
flat-fuchsia
flat-fuchsia2y 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.