foreign-sapphire•2y ago

Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?

I have this super strange error and I dont know why ... Instance created by useForm is not connected to any Form element. Forget to pass form prop?

    const { form, formProps, onFinish } = useForm<any>({
        action: "create",
        dataProviderName: PROVIDERS.LEARNING_LAB,
        resource: process.env.REACT_APP_LOGIN_PATH!+`?${query}`
    })
...

    const { form, formProps, onFinish } = useForm<any>({
        action: "create",
        dataProviderName: PROVIDERS.LEARNING_LAB,
        resource: process.env.REACT_APP_LOGIN_PATH!+`?${query}`
    })
...

...
return (
        <div className="container">
            <ConfigProvider theme={{token: { colorPrimary: clientDetails?.color ?? "" }}}>
                <Form {...formProps} form={form} name="connect" {...formProps} onFinish={handleFinish}  size="large" className="form">
                  /*Here is my form with some Form.Item*/
                </Form>
            </ConfigProvider>
        </div>
  )
...

...
return (
        <div className="container">
            <ConfigProvider theme={{token: { colorPrimary: clientDetails?.color ?? "" }}}>
                <Form {...formProps} form={form} name="connect" {...formProps} onFinish={handleFinish}  size="large" className="form">
                  /*Here is my form with some Form.Item*/
                </Form>
            </ConfigProvider>
        </div>
  )
...

As you may see, I didn't forget tu pass the form props : Form {...formProps} form={form} so why I have this error ??? PS : I'm not using this form inside a modal, it's a simple page

9 Replies

kapa.ai•2y ago

Hi @realdragonma. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, the useForm hook from refine provides a form instance and formProps which are used to manage the state and actions of the Ant Design Form component. In your code, you are correctly destructuring form and formProps from useForm and passing them to the Form component. However, you are passing formProps twice in your Form component which might be causing the issue. Here is the corrected code:

return (
        <div className="container">
            <ConfigProvider theme={{token: { colorPrimary: clientDetails?.color ?? "" }}}>
                <Form form={form} {...formProps} onFinish={handleFinish}  size="large" className="form">
                  /*Here is my form with some Form.Item*/
                </Form>
            </ConfigProvider>
        </div>
  )

return (
        <div className="container">
            <ConfigProvider theme={{token: { colorPrimary: clientDetails?.color ?? "" }}}>
                <Form form={form} {...formProps} onFinish={handleFinish}  size="large" className="form">
                  /*Here is my form with some Form.Item*/
                </Form>
            </ConfigProvider>
        </div>
  )

If the issue persists, it might be due to other factors not covered in the provided extracts. For more detailed information, you can refer to the refine documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useForm). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

foreign-sapphireOP•2y ago

@kapa.ai My bad, it was a copy paste error, i have corriged this, and now there is only one {...formProps} and ... it doesn't work, I have again this error

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: Sorry @realdragonma, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?

foreign-sapphireOP•2y ago

@kapa.ai any help ?

kapa.ai•2y ago

foreign-sapphireOP•2y ago

@kapa.ai some help ?

kapa.ai•2y ago

fascinating-indigo•2y ago

i couldn't see this error on our examples. if you provide reproducible examle we will happy to debug

Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?

Did you find this page helpful?