useStepsForm before submission event using ant-design UI

[heriparid]

Hi Team,

Currently I'm using step wizard using useStepForm using ant design UI
I have encountered some problems on how to get values before submitting to backend. I have a use case to implement some logic i.e: value-encryption. So that when the data is submitted to backend, the data is already encrypted.

First Try
I have tried to make use of "onFinish" event in my

component, but the onFinish function is not triggered when I click save/submit event. It's simply post the data directly to backend

Second Try
Using Form Instance as returned from useStepForm, and then by using formInstance, I invoke formProps.form?.submit(); then my onFinish function event is triggered, but unfortunately, only the last array of form values only populated

[omeraplak]

Hey @heriparid 👋,
Thank you for contacting us! You can override submit function of useStepsForm hook ⚡️

const stepsForm = useStepsForm({
    submit: (values) => {
        console.log(values);
    },
});

[heriparid]

Hi @omeraplak ,
I just saw and tried to edit in the built in IDE on the link given by you.
The submit function is successfully triggered as expected
Here's what I see

It's weird, I don't have a clue to spot what is going wrong on my own code :(
The save button is still not triggering submit function

[omeraplak]

Interesting... Are you sure all your refine dependencies are the latest version?

[heriparid]

Hi @omeraplak ,
Having updated the dependencies, pyuh,, It's working now :)

Thanks for guiding me.

Cheers

[omeraplak]

Cheers 🍻

[omeraplak]

Don't forget to support us by giving stars! thanks 🤩