plain-purple•13mo ago

I have this super strange error and I dont know why ... Instance created by useForm is not connected

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}`
    })
...

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

    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" 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

2 Replies

kapa.ai•13mo 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, it seems like you're correctly using the useForm hook and passing the form and formProps to the Form component. However, the error message suggests that the form instance created by useForm is not connected to any Form element. This could be due to a variety of reasons, such as a problem with the form's structure or a conflict with other hooks or components. It's also possible that there's an issue with the specific version of refine or Ant Design you're using. Unfortunately, without more specific information or context, it's difficult to provide a definitive solution. I would recommend checking the structure of your form and ensuring that all form items are correctly nested within the Form component. Also, make sure that there are no conflicts with other hooks or components. If the problem persists, you might want to refer to the official refine documentation (https://refine.dev/docs) or Ant Design documentation (https://ant.design/components/form/#header) for more information and examples on how to use forms. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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