absent-sapphire•13mo ago

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

kapa.ai•13mo ago

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:

import { Create, Drawer, useDrawerForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
import React from "react";  
  
export const UserCreate: React.FC = () => {  
 const { formProps, drawerProps, saveButtonProps } = useDrawerForm({  
 action: "create",  
 });  
  
 const handleOnFinish = (values) => {  
 formProps.onFinish?.({  
 fullName: `${values.name} ${values.surname}`,  
 });  
 };  
  
 return (  
 <Drawer {...drawerProps}>  
 <Create saveButtonProps={saveButtonProps}>  
 <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
 <Form.Item label="Name" name="name">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Surname" name="surname">  
 <Input />  
 </Form.Item>  
 </Form>  
 </Create>  
 </Drawer>  
 );  
};

import { Create, Drawer, useDrawerForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
import React from "react";  
  
export const UserCreate: React.FC = () => {  
 const { formProps, drawerProps, saveButtonProps } = useDrawerForm({  
 action: "create",  
 });  
  
 const handleOnFinish = (values) => {  
 formProps.onFinish?.({  
 fullName: `${values.name} ${values.surname}`,  
 });  
 };  
  
 return (  
 <Drawer {...drawerProps}>  
 <Create saveButtonProps={saveButtonProps}>  
 <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
 <Form.Item label="Name" name="name">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Surname" name="surname">  
 <Input />  
 </Form.Item>  
 </Form>  
 </Create>  
 </Drawer>  
 );  
};

(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: ----------------------

kapa.ai•13mo ago

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

absent-sapphireOP•13mo 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.ai

kapa.ai•13mo ago

Let 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:

import {{ Create, Drawer, useDrawerForm }} from "@refinedev/antd";  
import {{ Form, Input }} from "antd";  
import React from "react";  
  
export const UserCreate: React.FC = () => {{  
 const {{ formProps, drawerProps, saveButtonProps }} = useDrawerForm({{  
 action: "create",  
 }});  
  
 const handleOnFinish = (values) => {{  
 formProps.onFinish?.({{  
 fullName: `${{values.name}} ${{values.surname}}`,  
 }});  
 }};  
  
 return (  
 <Drawer {{...drawerProps}}>  
 <Create saveButtonProps={{saveButtonProps}}>  
 <Form {{...formProps}} onFinish={{handleOnFinish}} layout="vertical">  
 <Form.Item label="Name" name="name">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Surname" name="surname">  
 <Input />  
 </Form.Item>  
 </Form>  
 </Create>  
 </Drawer>  
 );  
}};

import {{ Create, Drawer, useDrawerForm }} from "@refinedev/antd";  
import {{ Form, Input }} from "antd";  
import React from "react";  
  
export const UserCreate: React.FC = () => {{  
 const {{ formProps, drawerProps, saveButtonProps }} = useDrawerForm({{  
 action: "create",  
 }});  
  
 const handleOnFinish = (values) => {{  
 formProps.onFinish?.({{  
 fullName: `${{values.name}} ${{values.surname}}`,  
 }});  
 }};  
  
 return (  
 <Drawer {{...drawerProps}}>  
 <Create saveButtonProps={{saveButtonProps}}>  
 <Form {{...formProps}} onFinish={{handleOnFinish}} layout="vertical">  
 <Form.Item label="Name" name="name">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Surname" name="surname">  
 <Input />  
 </Form.Item>  
 </Form>  
 </Create>  
 </Drawer>  
 );  
}};

(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: ----------------------

kapa.ai•13mo ago

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

absent-sapphireOP•13mo ago

@batuhanw if you can check this any help would be appreciated

passive-yellow•13mo 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-shl5n6

absent-sapphireOP•13mo 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 now

passive-yellow•13mo 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 🙏

absent-sapphireOP•13mo ago

thanks will do Seems that the issue was caused by some outdated packages. It is working fine now after running npm update

Antd useDrawerForm ignores antd validation

Did you find this page helpful?