ugly-tan•16h ago

Set field after modalForm submision

in ant design, I have a form to create a man, in the form is a select component to choose a wife for him (it uses a 'useSelect' hook to fetch the wives list) with a button below the component that opens a modal form to create new wife, I need that after the modal is submitted, the new person created is selected and setted in the select component

4 Replies

kapa.ai•16h ago

Hi @nicolasjuan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve what you're describing with refine and Ant Design, you can use the useModalForm hook along with useSelect. Here's how you can set up the form to create a man, include a select component for choosing a wife, and add a button to create a new wife using a modal form. After the modal is submitted, you can set the newly created wife as the selected option in the select component. Here's a step-by-step approach: 1. Use useModalForm for creating the wife:

const {
  modalProps: createWifeModalProps,
  formProps: createWifeFormProps,
  show: showCreateWifeModal,
} = useModalForm({
  action: "create",
  resource: "wives",
  onMutationSuccess: (data) => {
    // After successful creation, set the new wife as the selected option
    form.setFieldsValue({ wife: data.data.id });
  },
});

const {
  modalProps: createWifeModalProps,
  formProps: createWifeFormProps,
  show: showCreateWifeModal,
} = useModalForm({
  action: "create",
  resource: "wives",
  onMutationSuccess: (data) => {
    // After successful creation, set the new wife as the selected option
    form.setFieldsValue({ wife: data.data.id });
  },
});

2. Use useSelect for fetching the wives list:

const { selectProps: wifeSelectProps } = useSelect({
  resource: "wives",
  optionLabel: "name",
  optionValue: "id",
});

const { selectProps: wifeSelectProps } = useSelect({
  resource: "wives",
  optionLabel: "name",
  optionValue: "id",
});

3. Create the form for the man:

<Form form={form} {...formProps}>
  {/* Other form fields for creating a man */}
  <Form.Item name="wife" label="Wife">
    <Select {...wifeSelectProps} />
  </Form.Item>
  <Button onClick={() => showCreateWifeModal()}>Create New Wife</Button>
</Form>

<Modal {...createWifeModalProps}>
  <Form {...createWifeFormProps}>
    {/* Form fields for creating a wife */}
  </Form>
</Modal>

<Form form={form} {...formProps}>
  {/* Other form fields for creating a man */}
  <Form.Item name="wife" label="Wife">
    <Select {...wifeSelectProps} />
  </Form.Item>
  <Button onClick={() => showCreateWifeModal()}>Create New Wife</Button>
</Form>

<Modal {...createWifeModalProps}>
  <Form {...createWifeFormProps}>
    {/* Form fields for creating a wife */}
  </Form>
</Modal>

In this setup, when the modal for creating a new wife is submitted successfully, the onMutationSuccess callback will set the newly created wife as the selected option in the select component. This approach is based on the usage of useModalForm as described in the refine documentation for useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#usage). The onMutationSuccess callback is used to update the main form after the modal form is submitted successfully. Remember to adjust the resource names and field names according to your specific data model. Also, make sure to handle any necessary error cases and loading states in your actual implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16h ago

<@835960138347053057> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ugly-tanOP•16h ago

let's add that i'm using strapi data provider @kapa.ai let's add that i'm using strapi data provider

kapa.ai•16h ago

Let me check the knowledge base for you again. One moment! :books: