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
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:
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:
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:
----------------------<@1142541928815153268> kapa.ai is still learning and improving, please let us know how it did by reacting below
conscious-sapphireOP•14mo 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>'
vicious-gold•14mo ago
Hey @dervishmoose_46979 can you try with ‘refineCoreProps.onFinish’?
conscious-sapphireOP•14mo 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({}); }, });
const { current, gotoStep, stepsProps, formProps, saveButtonProps } = useStepsForm({ submit: async (values) => { console.log("I Ran"); // Your custom logic here return Promise.resolve({}); }, });