Antd useDrawerForm ignores antd validation
When I am using saveButtonProps as below in the examples it is skipping antd validation such as required: true and submitting form even if all inputs are empty.
It is also not triggering onFinish function
import { Create } from "@refinedev/antd";
import { Drawer, DrawerProps, Form, FormProps, Input, ButtonProps, Button } from "antd";
type CreateWorkCommentProps = {
drawerProps: DrawerProps;
formProps: FormProps;
saveButtonProps: ButtonProps;
};
export const CreateWorkComment: React.FC<CreateWorkCommentProps> = ({
drawerProps,
formProps,
saveButtonProps,
}) => {
return (
<Drawer
{...drawerProps}
width="500"
>
<Create resource="work_comments" saveButtonProps={saveButtonProps} title="Create Comment">
<Form
{...formProps}
layout="vertical"
onFinish={(values) => {
console.log(values)
}}
>
<Form.Item
name="text"
rules={[
{
required: true,
},
]}
>
<Input.TextArea />
</Form.Item>
<Form.Item
name="work_id"
hidden={true}
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
</Form>
</Create>
</Drawer>
);
};
10 Replies
Hi @ahnaf1022. 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 using the
useDrawerForm
hook from Refine with Ant Design. This hook allows you to manage a form within a Drawer and returns the Ant Design <Form>
and <Drawer>
components props.
The useDrawerForm
hook is extended from useForm
from the @refinedev/antd
package. This means that you can use all the features of useForm
hook with it. The formProps
returned by useDrawerForm
are required to manage <Form>
state and actions. It contains the props to manage the Antd <Form>
component such as onValuesChange
, initialValues
, onFieldsChange
, onFinish
etc. (source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-drawer-form#formprops)).
In your code, you're using saveButtonProps
in the Create
component and onFinish
in the Form
component. However, based on the example provided in the extracts, it seems like you should be using saveButtonProps
and formProps
together in the Form
component.
Here's an example from the extracts:
(source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-drawer-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api))
In this example, formProps
and onFinish
are used together in the Form
component. The onFinish
function is defined separately and then passed to the Form
component. This function modifies the form data before it is sent to the API.
If you're still having issues, you might want to check the Refine useDrawerForm hook documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-drawer-form) for more information or try the form-antd-use-drawer-form example (https://github.com/refinedev/refine/tree/master/examples/form-antd-use-drawer-form) provided in the extracts.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@543682490951532554> kapa.ai is still learning and improving, please let us know how it did by reacting below
sunny-green•9mo ago
However if I manually add a button in the form like below it triggers form validation and onFinish but does not submit the form.
export const CreateWorkComment: React.FC<CreateWorkCommentProps> = ({
drawerProps,
formProps,
saveButtonProps,
}) => {
return (
<Drawer
{...drawerProps}
width="500"
>
<Create resource="work_comments" saveButtonProps={saveButtonProps} title="Create Comment">
<Form
{...formProps}
layout="vertical"
onFinish={(values) => {
console.log(values)
}}
>
<Form.Item
name="text"
rules={[
{
required: true,
},
]}
>
<Input.TextArea />
</Form.Item>
<Form.Item
name="work_id"
hidden={true}
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</Create>
</Drawer>
);
};
I guess I can manually submit using the submit handler but I am wondering why the default method is not working when it seems to work in the examples in the documentation.
@kapa.aiLet me check the knowledge base for you. One moment! :books:
----------------------
Based on the information provided in the extracts, it seems like you're trying to manually add a submit button to your form. However, the
Create
component from Refine already includes a submit button by default. This button is managed by the saveButtonProps
prop in the Create
component.
In the example provided in the extracts, the saveButtonProps
prop is used to override the submit button. This prop is passed to the Create
component, not the Form
component. Here's the example:
(source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-drawer-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api))
In this example, the saveButtonProps
prop is used to manage the submit button in the Create
component. The onFinish
function is defined separately and then passed to the Form
component. This function modifies the form data before it is sent to the API.
If you're still having issues, you might want to check the Refine useDrawerForm hook documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-drawer-form) for more information or try the form-antd-use-drawer-form example (https://github.com/refinedev/refine/tree/master/examples/form-antd-use-drawer-form) provided in the extracts.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@543682490951532554> kapa.ai is still learning and improving, please let us know how it did by reacting below
sunny-green•9mo ago
@batuhanw if you can check this any help would be appreciated
vicious-gold•9mo ago
Hey @ahnaf1022, can this be related with the late initialiation of the component
CreateWorkComment
? I can see that you're passing the useForm
's response from props and using it but Ant Design may be having hard time registering the fields properly when its done this way.
Can you try defining the hooks and the <Form>
in the same component?
If the issue continues, please open up an issue at GitHub and provide minimal repro for the issue.
For the minimal repro, you can use this template as a starter https://codesandbox.io/p/devbox/nifty-visvesvaraya-shl5n6sunny-green•8mo ago
I tried moving the
<Form>
into the same component but no success. I tried using the templaye you linked but seems that it is unavailable nowvicious-gold•8mo ago
Sorry for the issue, looks like there's a problem with codesandbox 🤔 I also cannot view the sandbox neither create another one. I've used this example https://github.com/refinedev/refine/tree/master/examples/base-antd. You can also create a repro in your local and share the repo as well 🙏
sunny-green•8mo ago
thanks will do
Seems that the issue was caused by some outdated packages. It is working fine now after running
npm update