full-greenF
Refine3y ago
15 replies
full-green

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>
    );
};
Was this page helpful?