StepperForm

tsx

import { Button, Group, Paper, Stepper, Title,  } from "@mantine/core";
import { useForm } from "@mantine/form";
import { useEffect, useMemo, useState } from "react";

export default function DemoForm() {
    // Initialize the root form using the useForm hook
    const {
        setValues: setFormValues,
        setFieldValue,
        values: formValues,
        form,
        // ...other properties from the form
    } = useForm({
        /* Your form initialization parameters go here */
    });

    const [currrentStep, setCurrentStep] = useState(0);

    const onStepFormSubmit = (stepValues: Record<string, any>) => {
        // Once the current step form passed its validation, where we can update the root form values
    };

    const formStepValues = useMemo(() => {
        // Our logic to get the partial form values for the current step
        const firstStepFormValues = {};
        const secondStepFormValues = {};
        const thirdStepFormValues = {};

        return [
            firstStepFormValues,
            secondStepFormValues,
            thirdStepFormValues,
        ]
    }, [formValues, currrentStep]);

    const handleButtonClick = () => {
        // Validate the root form
        const validationResult = form.validate();

        if (!validationResult.hasErrors) {
            // remind user with form errors
            return;
        }

        // Your logic to submit the form
    };

    return (
        <>
            <Group>
                <Title order={2}>Fill Your Request</Title>
                {currrentStep > 2 && (<Button onClick={handleButtonClick}>Send</Button>)}
            </Group>
            <Stepper
                active={currrentStep}
                onStepClick={setCurrentStep}
                allowNextStepsSelect={false}
            >
                <Stepper.Step label="Step 1" />
                <Stepper.Step label="Step 2" />
                <Stepper.Step label="Step 3" />
            </Stepper>
            <Paper>
                {getStepContent(currrentStep, {
                    formValues: formStepValues[currrentStep],
                    onSubmit: onStepFormSubmit,
                })}
            </Paper>
        </>
    );
}

function getStepContent (step: number, 
    props: {
    formValues: Record<string,any>
    onSubmit: (values: Record<string,any>) => void
}) {
    // Your logic to get the partial form values for the current step

    const { formValues, onSubmit } = props;

    switch(step) {
        case 0:
            return <FirstStepForm values={formValues} onSubmit={onSubmit} />;
        case 1:
            return <SecondStepForm values={formValues} onSubmit={onSubmit} />;
        case 2:
            return <ThirdStepForm values={formValues} onSubmit={onSubmit} />;
        default:
            return null;
    }
}

type StepFormProps = {
    values: Record<string,any>
    onSubmit: (values: Record<string,any>) => void
};

const FirstStepForm = ({ values, onSubmit }: StepFormProps) => {
    const {
        setValues: setFormValues,
        values: formValues,
        // ...other properties from the form
    } = useForm({
        /* Your form initialization parameters go here */
    });

    useEffect(() => {
        // This is where we update the form values with the values from the parent form
        setFormValues(values);
    }, [setFormValues, values]);

    return (
        <form onSubmit={onSubmit}>
            {/* Your form fields go here */}
        </form>
    );
}