useStepFrom Steps onChange bug

[tolgayildizz]

import React from 'react'
import { useStepsForm } from 'sunflower-antd'
import { Steps, Input, Button, Form, Result } from 'antd'

const { Step } = Steps

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
}
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
}

const Example = () => {
    const { form, current, gotoStep, stepsProps, formProps, submit, formLoading } = useStepsForm({
        async submit(values) {
            const { username, email, address } = values
            console.log(username, email, address)
            await new Promise((r) => setTimeout(r, 1000))
            return 'ok'
        },
        total: 4,
    })
    const formList = [
        <>
            <Form.Item
                label='username'
                name='username'
                rules={[
                    {
                        required: true,
                        message: 'Please input username',
                    },
                ]}>
                <Input placeholder='Username' />
            </Form.Item>
            <Form.Item label='Email' name='email'>
                <Input placeholder='Email' />
            </Form.Item>
            <Form.Item {...tailLayout}>
                <Button onClick={() => gotoStep(current + 1)}>Next</Button>
            </Form.Item>
        </>,
        <>
            <Form.Item
                label='Age'
                name='age'
                rules={[
                    {
                        required: true,
                        message: 'Please input age',
                    },
                ]}>
                <Input placeholder='age' />
            </Form.Item>
            <Form.Item {...tailLayout}>
                <Button onClick={() => gotoStep(current + 1)}>Next</Button>
            </Form.Item>
            <Button onClick={() => gotoStep(current - 1)}>Prev</Button>
        </>,
        <>
            <Form.Item
                label='Address'
                name='address'
                rules={[
                    {
                        required: true,
                        message: 'Please input address',
                    },
                ]}>
                <Input placeholder='Address' />
            </Form.Item>
            <Form.Item {...tailLayout}>
                <Button
                    style={{ marginRight: 10 }}
                    type='primary'
                    loading={formLoading}
                    onClick={() => {
                        submit().then((result) => {
                            if (result === 'ok') {
                                gotoStep(current + 1)
                            }
                        })
                    }}>
                    Submit
                </Button>
                <Button onClick={() => gotoStep(current - 1)}>Prev</Button>
            </Form.Item>
        </>,
    ]

    return (
        <div>
            <Steps {...stepsProps}>
                <Step title='Step 1' />
                <Step title='Step 2' />
                <Step title='Step 3' />
                <Step title='Step 4' />
            </Steps>

            <div style={{ marginTop: 60 }}>
                <Form {...layout} {...formProps} style={{ maxWidth: 600 }}>
                    {formList[current]}
                </Form>

                {current === 3 && (
                    <Result
                        status='success'
                        title='Submit is succeed!'
                        extra={
                            <>
                                <Button
                                    type='primary'
                                    onClick={() => {
                                        form.resetFields()
                                        gotoStep(0)
                                    }}>
                                    Buy it again
                                </Button>
                                <Button>Check detail</Button>
                            </>
                        }
                    />
                )}
            </div>
        </div>
    )
}

export default Example

In a scenario where I have more than two form fields, it sends the form ignoring the required fields because I can change it by clicking on the Steps.

It is a necessary behavior for users to change the form by clicking on it. In this case, the stepper structure does not work properly.

Only when I disable the onChange I can I get the form completely. But I don't think this is the best method.

Thank you for your help.

[HaoChenxin]

If you want to get all the data in the form, you can do this: getFieldsValue(true)

[HaoChenxin]

Submitting in different steps cannot verify the fields in other steps. I think this is not a bug, because other form elements do not exist

If you want to verify other forms, you normally need to display the corresponding pages, but you can write a verification animation to display the corresponding pages in turn, and then trigger the verification. If you pass the verification, you will go to the next step, otherwise you will stop