wise-white•8mo ago

useStepsForm and custom form handler with Antd not working

I am new to refine and I am working on a multi step form that will collect name and address. The trick is in my supabase backend these are separate tables. Ok, no big deal; just write a custom form handler to insert the right data into each table. The problem I am running into is I can not get the custom form handler to fire when I useing useStepsForm. export const ResumeProfileCreate: React.FC = () => { const { current, gotoStep, stepsProps, formProps, saveButtonProps } = useStepsForm(); const handleFormFinish = async (values: any) => { console.log("I Ran"); }; }; In the form I have tried passing onFinish in the FormProps and in the tag. What am I missing OR am I trying to do something that is not allowed and I am thinking about this wrong? <Form {...modifiedFormProps} layout="vertical" style={{ marginTop: 30 }} onFinish={handleFormFinish} >

5 Replies

kapa.ai•8mo ago

Hi @dervishmoose_46979. 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 trying to execute a custom function when the form is submitted using the useStepsForm hook from refine. The onFinish function is called when the form is submitted. You can override the default behavior by passing an onFinish function in the hook's options. However, in your code, you're trying to pass the onFinish function directly to the Form component, which might not work as expected. Instead, you should pass the onFinish function directly to the useStepsForm hook's options, like this:

const { current, gotoStep, stepsProps, formProps, saveButtonProps } = useStepsForm({
    onFinish: async (values) => {
        console.log("I Ran");
        // Your custom logic here
        return Promise.resolve({});
    },
});

const { current, gotoStep, stepsProps, formProps, saveButtonProps } = useStepsForm({
    onFinish: async (values) => {
        console.log("I Ran");
        // Your custom logic here
        return Promise.resolve({});
    },
});

Please note that the onFinish function should return a promise that resolves with the data to be sent to the API. If you don't want to send any data to the API, you can return a resolved promise, like this:

onFinish: async (values) => {
    console.log("I Ran");
    // Your custom logic here
    return Promise.resolve({});
},

onFinish: async (values) => {
    console.log("I Ran");
    // Your custom logic here
    return Promise.resolve({});
},

This information is based on the extract from a Discord support thread (https://discord.com/channels/837692625737613362/1132749587459883089). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

wise-white•8mo ago

The code provided is ignored. The form is submitted as normal and the custom Logic is never run. The warning VS Code gives is: Object literal may only specify known properties, and 'onFinish' does not exist in type 'UseStepsFormProps<BaseRecord, HttpError, {}, BaseRecord, BaseRecord, HttpError>'

environmental-rose•8mo ago

Hey @dervishmoose_46979 can you try with ‘refineCoreProps.onFinish’?

wise-white•8mo ago

Good idea. I am getting a "No value exists in scope for the shorthand property" when I try that. Ha, I just discovered what I think is the correct answer: export const ResumeProfileCreate: React.FC = () => {
const { current, gotoStep, stepsProps, formProps, saveButtonProps } = useStepsForm({ submit: async (values) => { console.log("I Ran"); // Your custom logic here return Promise.resolve({}); }, });