BlackBearFTW Comments - Answer Overflow

If I only have some fields on the first page, I cannot go to the next page, as it tried to validate fields that haven't been shown yet. @kapa.ai @Batu

34 replies

RRefine

•Created by ambitious-aqua on 1/23/2025 in #ask-any-question

useStepForm from react-form-hooks doesn't work as expected

const createFormScheme = z.object({
    title: z.string().min(1, "Title is required"),
    description: z.string().min(1, "Description is required"),
    roomCount: z.coerce.number().min(1).default(1),
    constructionType: z.string().min(1, "Construction type is required"),
    areaInSquareMeter: z.coerce.number().min(0.5).default(0),
    plotAreaInSquareMeter: z.coerce.number().min(0.5).default(0),
    newConstruction: z.boolean().default(false),
    address: z.object({
        postalCode: z.string().regex(/^[0-9]{4} [A-Za-z]{2}$/, "Invalid format (e.g., 1234 AB)"),
        houseNumber: z.coerce.number().min(1).default(0),
        houseNumberAddition: z.string().optional(),
        streetName: z.string().min(1, "Street name is required"),
        city: z.string().min(1, "City is required"),
    }),
    offerSettings: z.object({
        minimalOfferAmount: z.coerce.number().min(0).default(0),
        targetedAmount: z.coerce.number().min(0).default(0),
        stepPerOffer: z.coerce.number().min(0).default(0),
        realtorFee: z.coerce.number().min(0).default(0),
        allowOffersWithBuildingInspectionClause: z.boolean().default(false),

    }),
    test: z.string().min(1, "Title is required"),
})

export type CreatePropertyFields = z.infer<typeof createFormScheme>;

const createFormScheme = z.object({
    title: z.string().min(1, "Title is required"),
    description: z.string().min(1, "Description is required"),
    roomCount: z.coerce.number().min(1).default(1),
    constructionType: z.string().min(1, "Construction type is required"),
    areaInSquareMeter: z.coerce.number().min(0.5).default(0),
    plotAreaInSquareMeter: z.coerce.number().min(0.5).default(0),
    newConstruction: z.boolean().default(false),
    address: z.object({
        postalCode: z.string().regex(/^[0-9]{4} [A-Za-z]{2}$/, "Invalid format (e.g., 1234 AB)"),
        houseNumber: z.coerce.number().min(1).default(0),
        houseNumberAddition: z.string().optional(),
        streetName: z.string().min(1, "Street name is required"),
        city: z.string().min(1, "City is required"),
    }),
    offerSettings: z.object({
        minimalOfferAmount: z.coerce.number().min(0).default(0),
        targetedAmount: z.coerce.number().min(0).default(0),
        stepPerOffer: z.coerce.number().min(0).default(0),
        realtorFee: z.coerce.number().min(0).default(0),
        allowOffersWithBuildingInspectionClause: z.boolean().default(false),

    }),
    test: z.string().min(1, "Title is required"),
})

export type CreatePropertyFields = z.infer<typeof createFormScheme>;

34 replies

RRefine

•Created by passive-yellow on 1/23/2025 in #ask-any-question

useStepForm from react-form-hooks doesn't work as expected

    const form = useStepsForm<BaseRecord, HttpError, CreatePropertyFields>({
        resolver: zodResolver(createFormScheme),
        stepsProps: {
            isBackValidate: false
        },
        defaultValues: {
            title: "",
            description: "",
            roomCount: 1,
            constructionType: "",
            areaInSquareMeter: 0,
            plotAreaInSquareMeter: 0,
            newConstruction: false,
            address: {
                postalCode: "",
                houseNumber: 0,
                houseNumberAddition: undefined,
                streetName: "",
                city: "",
            },
            offerSettings: {
                minimalOfferAmount: 0,
                targetedAmount: 0,
                stepPerOffer: 0,
                realtorFee: 0,
                allowOffersWithBuildingInspectionClause: false,
            },
        }
    });


    const {
        refineCore: {onFinish, formLoading},
        register,
        handleSubmit,
        formState: {errors},
        steps: {currentStep, gotoStep},
    } = form;

    const form = useStepsForm<BaseRecord, HttpError, CreatePropertyFields>({
        resolver: zodResolver(createFormScheme),
        stepsProps: {
            isBackValidate: false
        },
        defaultValues: {
            title: "",
            description: "",
            roomCount: 1,
            constructionType: "",
            areaInSquareMeter: 0,
            plotAreaInSquareMeter: 0,
            newConstruction: false,
            address: {
                postalCode: "",
                houseNumber: 0,
                houseNumberAddition: undefined,
                streetName: "",
                city: "",
            },
            offerSettings: {
                minimalOfferAmount: 0,
                targetedAmount: 0,
                stepPerOffer: 0,
                realtorFee: 0,
                allowOffersWithBuildingInspectionClause: false,
            },
        }
    });


    const {
        refineCore: {onFinish, formLoading},
        register,
        handleSubmit,
        formState: {errors},
        steps: {currentStep, gotoStep},
    } = form;