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