eastern-cyan
eastern-cyan11mo 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
kapa.ai11mo 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
kapa.ai11mo ago
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
eastern-cyan
eastern-cyan11mo 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
kapa.ai11mo 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?
eastern-cyan
eastern-cyan11mo ago
@kapa.ai any help ?
kapa.ai
kapa.ai11mo 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?
eastern-cyan
eastern-cyan11mo ago
@kapa.ai some help ?
kapa.ai
kapa.ai11mo 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?
itchy-amethyst
itchy-amethyst11mo ago
i couldn't see this error on our examples. if you provide reproducible examle we will happy to debug