gruperly/.agents/skills/react-hook-form/references/integ-value-transform.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Transform Values at Controller Level for Type Coercion	MEDIUM	stops string input values reaching a number- or date-typed schema	integ, transform, value-coercion, Controller

Transform Values at Controller Level for Type Coercion

Native inputs return strings. When your form needs numbers, dates, or other types, transform values in the Controller render function rather than relying solely on valueAsNumber or valueAsDate.

Incorrect (valueAsNumber has edge cases):

function QuantityInput() {
  const { register } = useForm()

  return (
    <input
      {...register('quantity', { valueAsNumber: true })}  // Returns NaN for empty string
      type="number"
    />
  )
}

Correct (explicit transformation in Controller):

function QuantityInput({ control }: { control: Control }) {
  return (
    <Controller
      name="quantity"
      control={control}
      render={({ field }) => (
        <input
          type="number"
          value={field.value ?? ''}
          onChange={(e) => {
            const value = e.target.value
            field.onChange(value === '' ? null : parseInt(value, 10))
          }}
          onBlur={field.onBlur}
        />
      )}
    />
  )
}

Alternative (Zod transform at schema level):

const schema = z.object({
  quantity: z.string().transform((val) => (val === '' ? null : parseInt(val, 10))),
})

Reference: React Hook Form - Advanced Usage