fair-rose
fair-rose6mo 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
kapa.ai6mo 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
kapa.ai6mo ago
<@1142541928815153268> kapa.ai is still learning and improving, please let us know how it did by reacting below
fair-rose
fair-rose6mo 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>'
like-gold
like-gold6mo ago
Hey @dervishmoose_46979 can you try with ‘refineCoreProps.onFinish’?
fair-rose
fair-rose6mo 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({}); }, });
More Posts
Resources not marking route as active@kapa.ai why is it that why I navigate to `creator-details` list route, the campaigns in my dash menon finish handler of refinr-hook-form giving create-property.tsx:34 TypeError: Cannot read properticreate-property.tsx:34 TypeError: Cannot read properties of undefined (reading 'toLowerCase') agetting this error Cannot read properties of undefined (reading 'email')TypeError: Cannot read propimport { useState } from "react"; import { useGetIdentity } from "@pankod/refine-core"; import { useCannot find module '@refinedev/core' or its corresponding type declarations.Cannot find module '@refinedev/core' or its corresponding type declarations.autocomplete option fetchin the autocomplete from refine, i ahve set useautocomplete to fetch the resouce data as options andHow to delete input field name with value before submitted formmy-json-data like this " "groupdetail": [ { "term_1": 11, "term_2": 5555, "terdev tools remove it from rerfine projecti dont want to see dev tools of refine visible on the projecthow can i define user to avoid the undefined user errorcreate-property.tsx:39 Uncaught (in promise) TypeError: Cannot read properties of undefined (readingetting this error in formcontrol Uncaught (in promise) TypeError: Cannot read properties of undefincreate-property.tsx:39 Uncaught (in promise) TypeError: Cannot read properties of undefined (readinHow does the DeleteButton work?How does the DeleteButton component work? and can I pass a custom function for it to run?