I have a form field which is a nested Object how can I use `useDrawerForm` to create entry?
I have a form field which would have dynamic fields based on an Object Array something like this [{'key': 'field-1', 'required': true}, {'key': 'field-2', 'required': false}]. I want to construct the form elements based on the object array, lets say the data from this form would be saved as a json under
data field how to use useDrawerForm to achieve this?6 Replies
conscious-sapphire•2y ago
I am not sure what you are asking for but if I do understand you are trying to create a nested form with dynamic form fields. You can use ant design dynamic form https://ant.design/components/form#components-form-demo-dynamic-form-items
Is this what you are looking for in your useDrawerForm?
conscious-sapphire•2y ago
@dipbazz yes i looked into that but it still didn't have dynamic field array, also how does one set the default values for fields? as i would have the schema already available for me, anyway the way i solved it for now is to put the fields and then parse the values
onFinish.conscious-sapphire•2y ago
Hey @ramkumar, to get the default values you should use the initialvalues in form for controlled input. You can have a reference https://ant.design/components/form#form over here for initialValues. If you are using
Form.List to generate a dynamic values then still you can use initialValue. For you reference https://ant.design/components/form#formlist
According to ant design docs:
You cannot set value for each form control via value or defaultValue prop, you should set default value with initialValues of Form. Note that initialValues cannot be updated by setState dynamically, you should use setFieldsValue in that situation.conscious-sapphire•2y ago
You can also have a reference for this article for multi-level nested form in ant design which I have published in medium
https://dipbazz.medium.com/multi-level-nested-forms-with-ant-design-in-react-736a6ea4928d
Or you can also have a reference https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design/
Medium
Multi-level Nested forms with ant design in React.
Ant Design — The world’s second most popular React UI framework as per the ant design team's official website. As the design framework is…
How to Create Dynamic Forms in React CRUD app with Ant Design | refine
Easy way to creating dynamic forms in React CRUD apps with Ant Design
conscious-sapphire•2y ago
@dipbazz thanks for the article links you article is super helpful.. i think it helped solve my issue.
conscious-sapphire•2y ago
@ramkumar glad to hear it helped you and you solved your issue.