deep-jade
deep-jade2y ago

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
harsh-harlequin
harsh-harlequin2y 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?
deep-jade
deep-jade2y 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.
harsh-harlequin
harsh-harlequin2y 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.
harsh-harlequin
harsh-harlequin2y 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
deep-jade
deep-jade2y ago
@dipbazz thanks for the article links you article is super helpful.. i think it helped solve my issue.
harsh-harlequin
harsh-harlequin2y ago
@ramkumar glad to hear it helped you and you solved your issue.