fascinating-indigo•5mo ago

Why input request type string?

export const PointsModal = ({ type, point_id, member_id }: PointsModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish },
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: 'points',
      action: 'create',
      redirect: 'list',
    },
  })

...

<FormControl>
  <FormLabel>{isPay ? '추가 지급할 적립금' : '회수할 적립금'}</FormLabel>
  <OutlinedInput
    type="number"
    id="amount"
    error={!!errors.amount}
    {...register('amount', {
      required: t('errors.required.field', {
        field: 'amount',
      }),
    })}
    style={{ height: '40px' }}
  />
</FormControl>

export const PointsModal = ({ type, point_id, member_id }: PointsModalProps) => {
  const {
    register,
    setValue,
    formState: { errors },
    handleSubmit,
    reset,
    refineCore: { onFinish },
  } = useForm<IPointDetail, HttpError, Nullable<IPointDetail>>({
    refineCoreProps: {
      resource: 'points',
      action: 'create',
      redirect: 'list',
    },
  })

...

<FormControl>
  <FormLabel>{isPay ? '추가 지급할 적립금' : '회수할 적립금'}</FormLabel>
  <OutlinedInput
    type="number"
    id="amount"
    error={!!errors.amount}
    {...register('amount', {
      required: t('errors.required.field', {
        field: 'amount',
      }),
    })}
    style={{ height: '40px' }}
  />
</FormControl>

I use OutlinedInput, receive it as a number and submit. At this time, the amount is delivered as a string, not a number.

2 Replies

kapa.ai•5mo ago

Hi @florent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing is related to how form libraries, like react-hook-form (which is used by Refine), handle number inputs. By default, HTML form inputs of type "number" still return their values as strings. This is because the HTML DOM API treats input values as strings by default. In your case, even though you've specified the input type as "number", the value is still being returned as a string. This is standard behavior and not a bug. To get around this, you can use the valueAsNumber property when registering the input field with react-hook-form. This tells react-hook-form to treat the input value as a number, not a string. Here's how you can modify your code:

<OutlinedInput
  type="number"
  id="amount"
  error={!!errors.amount}
  {...register('amount', {
    required: t('errors.required.field', {
      field: 'amount',
    }),
    valueAsNumber: true, // Add this line
  })}
  style={{ height: '40px' }}
/>

<OutlinedInput
  type="number"
  id="amount"
  error={!!errors.amount}
  {...register('amount', {
    required: t('errors.required.field', {
      field: 'amount',
    }),
    valueAsNumber: true, // Add this line
  })}
  style={{ height: '40px' }}
/>

This issue was discussed in a Github issue (https://github.com/refinedev/refine/issues/3550) related to the Refine project. The solution provided there should apply to your case as well. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@1184365192482652173> kapa.ai is still learning and improving, please let us know how it did by reacting below