onfinish callback
onfinish dosent seem to be executed??
const {
form,
current,
gotoStep,
stepsProps,
formProps,
saveButtonProps,
queryResult,
} = useStepsForm<any>({
autoSave:{
enabled:false,
onFinish:(values)=>{
campaignRef.current.getFinalFormData();
return {};
}
}
});
return (
<Edit
isLoading={queryResult?.isFetching}
footerButtons={
<>
{current > 0 && (
<Button
onClick={() => {
gotoStep(current - 1);
}}
>
{t("buttons.previousStep")}
</Button>
)}
{current < formList.length - 1 && (
<Button
onClick={() => {
handleGoToNextStep();
}}
>
{t("buttons.nextStep")}
</Button>
)}
{current === formList.length - 1 && (
<SaveButton style={{ marginRight: 10 }} {...saveButtonProps} />
)}
</>
}
>
{/* <Row gutter={[64, 0]} wrap> */}
<Steps {...stepsProps} responsive>
<Steps.Step title={t("campaigns.steps.details")} />
<Steps.Step title={t("campaigns.steps.targeting")} />
<Steps.Step title={t("campaigns.steps.ads")} />
</Steps>
<CampaignForm ref={campaignRef} formProps={formProps} campaignQueryResult={queryResult} initialValues={{
isActive: true,
...formProps.initialValues,
}} current={current} gotoStep={gotoStep} form={form} />
</Edit>
);
8 Replies
Hi @dreamer9067. 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 provided code, it seems like you're using the
useStepsForm
hook from refine and you're trying to execute some custom logic when the form is submitted using the onFinish
function.
The onFinish
function is called when the form is submitted. It will call the appropriate mutation based on the action
property. You can override the default behavior by passing an onFinish
function in the hook's options (source (https://refine.dev/docs/api-reference/antd/hooks/form/useForm)).
However, in your code, you're passing the onFinish
function inside an autoSave
object. The autoSave
object is not a recognized option for the useStepsForm
hook based on the provided extracts. This might be the reason why your onFinish
function is not being executed.
If you want to execute some custom logic when the form is submitted, 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:
If you're still having issues, I would recommend checking the official documentation or seeking help from the community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below
wise-white•15mo ago
@kapa.ai still onFinish not working for below code
import { CampaignForm } from "./form";
export const CampaignEdit: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
const campaignRef = useRef();
const {
form,
current,
gotoStep,
stepsProps,
formProps,
saveButtonProps,
queryResult,
} = useStepsForm<any>({
onFinish:()=>{
campaignRef.current.getFinalFormData();
return Promise.resolve({});
// return values;
}
});
const [, setSelectedLocations] = useState<any[]>([]);
const formList = [1,2,3];
const handleGoToNextStep = async () => {
try {
console.log("Field Values:", form.getFieldsValue());
console.log("Field Errors:", form.getFieldsError());
await form.validateFields();
gotoStep(current + 1); // Proceed to the next step if validation is successful
} catch (error) {
// Handle validation errors if needed
console.error("Validation error:", error);
}
};
return (
<Edit
isLoading={queryResult?.isFetching}
footerButtons={
<>
{current > 0 && (
<Button
onClick={() => {
gotoStep(current - 1);
}}
>
{t("buttons.previousStep")}
</Button>
)}
{current < formList.length - 1 && (
<Button
onClick={() => {
handleGoToNextStep();
}}
>
{t("buttons.nextStep")}
</Button>
)}
{current === formList.length - 1 && (
<SaveButton style={{ marginRight: 10 }} {...saveButtonProps} />
)}
</>
}
>
<CampaignForm ref={campaignRef} formProps={formProps} campaignQueryResult={queryResult} initialValues={{
isActive: true,
...formProps.initialValues,
}} current={current} gotoStep={gotoStep} form={form} />
</Edit>
);
};
Let me check the knowledge base for you. One moment! :books:
----------------------
Based on the provided code, it seems like you're using the
useStepsForm
hook from refine and you're trying to execute some custom logic when the form is submitted using the onFinish
function.
The onFinish
function is called when the form is submitted. It will call the appropriate mutation based on the action
property. You can override the default behavior by passing an onFinish
function in the hook's options (source (https://refine.dev/docs/api-reference/antd/hooks/form/useForm)).
However, in your code, you're passing the onFinish
function inside an autoSave
object. The autoSave
object is not a recognized option for the useStepsForm
hook based on the provided extracts. This might be the reason why your onFinish
function is not being executed.
If you want to execute some custom logic when the form is submitted, 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:
If you're still having issues, I would recommend checking the official documentation or seeking help from the community.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below
wise-white•15mo ago
@kapa.ai how to not load form if an api call fails??
Let me check the knowledge base for you. One moment! :books:
----------------------
In refine, you can handle API errors using the
HttpError
interface. When an API call fails, you can throw an HttpError
and catch it in your component to prevent the form from loading.
Here's an example of how to implement error handling in your data provider (source (https://refine.dev/docs/api-reference/core/providers/data-provider)):
In your component, you can use a try/catch
block to catch the error and prevent the form from loading. Here's a basic example:
In this example, the form (MyForm
) will not be rendered if an API call fails. Instead, an error message will be displayed.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below