0

Mi problema es que tengo un formulario en react manejado con react hook form, pero por alguna razón los radio buttons no me funcionan correctamente cuando utilizo dos o más con el mismo nombre. Lo que pasa es que cuando se solicita que sea requerido y selecciono la primera opción me da error de validación al enviar el formulario, pero si vuelvo a seleccionar la misma opción después del error ya no muestra ningún error y se puede enviar la información.

Mi código es el siguiente:

Componente para grupo de RadioButtons

import { useFormContext } from 'react-hook-form'

import { classNames } from 'utils'

export default function RadioGroup({ id, title, options, validation }) {
  const {
    register,
    formState: { errors }
  } = useFormContext()

  return (
    <>
      {title}
      {options.map(({ label, value, readOnly }, i) => (
        <label key={i} className="inline-flex items-center">
          <input
            {...register(id, validation)}
            type="radio"
            value={value}
            readOnly={readOnly}
            className={classNames(
              readOnly
                ? 'bg-gray-100 cursor-not-allowed border-gray-300 focus:border-gray-300'
                : errors[id]
                ? 'border-red-500 focus:border-red-500'
                : 'h-5 w-5 text-blue-600'
            )}
          />
          <span className="ml-2 text-gray-700">{label}</span>
        </label>
      ))}
      <div className="mt-1">
        {errors[id] && errors[id].type === 'required' && (
          <span className="text-xs text-red-500">{`Seleccione una opción`}</span>
        )}
      </div>
    </>
  )
}

Y desde otro componente llamo al de RadioGroup de la siguiente manera:

const methods = useForm({ mode: 'onSubmit' })
  const {
    handleSubmit,
    reset,
    setValue,
    formState: { errors }
  } = methods

<FormProvider {...methods}>
    <form
    onSubmit={handleSubmit(onSubmit)}
    className="w-full space-y-4 p-2"
    >
        <div className="grid grid-cols-1">
            <RadioGroup
                title="Es propio"
                id="isOwn"
                options={[
                    { label: 'Sí', value: '1' },
                    { label: 'No', value: '0' }
                ]}
                validation={{
                    required: true
                }}
            />
        </div>
        <div className="mt-8 w-full">
            <div className="float-right px-4 space-x-2">
                <button
                    className="btn btn-success"
                    type="submit"
                >
                    Guardar
                </button>
            </div>
        </div>
    </form>
</FormProvider>

La parte que genera el problema es la validación de requerido. Si no lleva validación funciona (pero no valida y necesito que lo haga). Estuve viendo la implementación en la página oficial y ahí parece funcionar bien, pero a mí no. Incluso hice pruebas agregando los RadioButtons estáticos y siempre sucede el mismo problema. Agradecería mucho si me pueden ayudar.

1 respuesta 1

1

Ya logré resolver por medio de un Controller en el componente del RadioGroup.

Quedó de la siguiente manera:

import { useFormContext, Controller } from 'react-hook-form'

import { classNames } from 'utils'

export default function RadioGroup({ id, title, options, validation }) {
  const {
    control,
    formState: { errors }
  } = useFormContext()

  return (
    <>
      {title}
      <Controller
        name={id}
        id={id}
        isClearable
        control={control}
        rules={validation}
        render={({ field }) => {
          console.log(field)
          return options.map(({ label, value, readOnly }, i) => (
            <label key={i} className="inline-flex items-center">
              <input
                {...field}
                type="radio"
                value={value}
                checked={field.value === value}
                readOnly={readOnly}
                className={classNames(
                  readOnly
                    ? 'bg-gray-100 cursor-not-allowed border-gray-300 focus:border-gray-300'
                    : errors[id]
                    ? 'border-red-500 focus:border-red-500'
                    : 'h-5 w-5 text-blue-600'
                )}
              />
              <span className="ml-2 text-gray-700">{label}</span>
            </label>
          ))
        }}
      />
      <div className="mt-1">
        {errors[id] && errors[id].type === 'required' && (
          <span className="text-xs text-red-500">{`Seleccione una opción`}</span>
        )}
      </div>
    </>
  )
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.