Radio Required - Form Steps

[gabrieelaraujo]

I have a form with steps, eg: 1. Personal Data, 2. Address, etc..

One of the steps the person chooses a plane, and there are some radio inputs for the person to choose just one. I'm trying to put mandatory, it works just fine, but if I choose an option it doesn't validate the other radio, as if I hadn't chosen any option, then it only validates if I click on one by one.

Is there any way to do this other than doing a check in the step, checking if it's empty etc, directly in the RadioField component, for example?

Component (InputRadio.tsx)

import React, { useEffect, useState } from 'react';
import { useField } from '@formiz/core';

export const FieldRadio = (props: any) => {
    const {
        isValid,
        isPristine,
        isSubmitted,
        resetKey,
        setValue,
        errorMessage
    } = useField({
        ...props
    })

    const { id, name, label, value } = props
    const [isFocused, setIsFocused] = useState(false);
    const showError = !isValid && !isFocused && (!isPristine || isSubmitted)
      
    const changeRadio = (e: any) => {
        setValue(e.target.value)
        setIsFocused(true)
    }


      
    return (
        <>    
            <input
                key={id}
                id={id}
                name={name}
                value={value || ''}
                className={`absolute right-3 top-3 h-4 w-4 border-2 bg-white border-muy-text-gray-primary rounded-full cursor-pointer appearance-none checked:bg-[#00B570] checked:border-[#00B570] focus:outline-none focus:ring-2 focus:ring-[#00B570]
                ${showError ? "bg-red-100 border border-red-500" : "border-0 "}`}
                onChange={(e) => changeRadio(e)}
                aria-invalid={showError}
                aria-describedby={showError ? `${id}-error` : undefined}
                aria-label={label}
                type="radio"
            />

            {/* {showError && (<span id={`${id}-error`} className="absolute right-0 top-0 mt-3 mr-4 text-red-500 text-sm">{errorMessage}</span>)} */}
        </>
    );
};

Component: Step2.tsx

<>
<div><FieldRadio name="kit" label="1 pack" value="1pack-experience" id="1pack-experience" required="Required"/></div>
<div><FieldRadio name="kit" label="2 pack" value="2pack-experience" id="2pack-experience" required="Required"/></div>
<div><FieldRadio name="kit" label="3 pack" value="3pack-experience" id="3pack-experience" required="Required"/></div>
</>

Maybe it's some detail I haven't seen yet lol, but I resorted to the following:

const handleSubmitStep = async (event: any) => {
        event.preventDefault();

        // check if some radio kit is checked 
        if (form.currentStep?.name === 'kit') {
            if (!form.values.kit ) {
                form.invalidateFields({
                    kit: 'Choose kit',
                });
                const stepWithError = form.getFieldStepName('kit');
                if (stepWithError) {
                    form.goToStep(stepWithError);
                }
                form.submitStep();
                return ;
            }
        }
  if (
            !form.currentStep
            || !form.currentStep?.isValid
            || !form.currentStep?.name
        ) {
            form.submitStep();
            return;
        }


        console.log(`Submitting ${form.currentStep?.name}...`);
        form.submitStep();

Can help me @ivan-dalmet ?

[ivan-dalmet]

Hi @gabrieelaraujo,
I see some issues here:

• You should get value from useField() not from props (here the value is not sync with the internal formiz state)
• You can't have multiple fields with the same name (only the last registered name will be used)

You will need to create a FieldRadios to handle this.
You can see an example here -> https://github.com/BearStudio/start-ui-web/blob/master/src/components/FieldRadios/index.tsx

I hope this can help.
If you need more help, can you provide a CodeSandbox example?

[gabrieelaraujo]

I understood @ivan-dalmet , but it is necessary to be the same name, if I put differently the person can select more than one radio, because the idea is even if they are separated, I say, outside a group they relate, in case of marking some option already Recognize that one has been marked and is not restricted because the others are also Required.

I also tried to pass the Value outside of Props, tried many ways lol but I was stagnant on this issue.

The way I understood that I passed me, I am obliged to put in a group, would it be?

I created a sandbox of the idea of how it is, without stylization, but if it works that way would solve too much, even with regard to checkbox that I get stuck in the same thought, but solving each other is basically the same.

https://codesandbox.io/p/sandbox/sharp-waterfall-bjly2m (nextjs 13)

I thank you very much, I really got stuck in this lol