valueAsNumber in Controllers

[AdiHefferLusha]

Hi all,
I'm using a material UI input, wrapped by a controller, and I would like to get its submitted data as a parsed number.
However, the valueAsNumber rule doesn't seem to work for controllers, as shown in this sandbox:
https://codesandbox.io/s/zealous-currying-90d5wf?file=/src/App.js
(type any number into both inputs and submit to see the controlled value is still a string)

I didn't open a bug, since I've read the documentation closely, and it doesn't explicitly say that the controller's rules include valueAsNumber.
My question is: Should valueAsNumber work on a controller? If not, is there another way to configure my controller to retrieve a number?

Thanks!

[Moshyfawn]

Controller doesn't pack the valueAs functionality by design.

In the Controller types (omitted most of unrelated types for simplicity):

type UseControllerProps<...> = {
    ...
    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
    ....
};

You can simply parse your input's value before passing it to the Controller's onChange handler

<Controller
-    rules={{ valueAsNumber: true }}
      render={({ field }) => (
          <input
-             onChange={field.onChange}
+             onChange={(event) => field.onChange(+event.target.value)}
              type="number"
          />
  )}
/>

[bluebill1049]

here is related feature request: https://github.com/react-hook-form/react-hook-form/projects/1

[AmitNeuhaus]

@bluebill1049
Can you explain how will your sandbox work when we want to reset the value of the controlled input?
We will have to reset both the UI state value (which is seperated from the field value), but how can we listen that the field.value reseted and call setUiValue('')?

[takanuva15]

I just found this thread while trying to look up the same functionality myself lol. Incidentally, I was also confused why valueAsNumber is available for register but not for Controller.

I think adding the valueAs props for Controllers would be great, and we can just put a disclaimer in the docs that the relevant transformation is applied after the invocation of the onChange method (in case someone tries to put their own custom event function like in the example).

[gabriellemos]

Had some issues with typescript because RHF has a different definition for onChange, to solve it I used the following instead of a plain old html input.

import type { ComponentPropsWithoutRef } from 'react'
import React from 'react'
import type { ControllerRenderProps } from 'react-hook-form'

type NumberInputProps = Pick<ControllerRenderProps, 'onChange'> &
  Omit<ComponentPropsWithoutRef<'input'>, 'onChange'>

const NumberInput = ({ onChange, ...props }: NumberInputProps) => {
  return (
    <input
      {...props}
      onChange={(event) => onChange?.(parseInt(event.target.value, 10))}
      type="number"
    />
  )
}

export default NumberInput

[sacru2red]

how to vote #6841

[clemente-xyz]

I think is not good designed and is a not scalable workaround. numerical inputs are numerical, they should be returned as so by react-hook-form. I think is a bad implementation what they did there. Hope they fix it on a future 🙂

[bluebill1049]

Not here to argue right or wrong, just to provide information so developers don't get confused about such.

numerical inputs are numerical

That's incorrect.

Please refer to the HTML spec: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

[cfaester]

They are strings and should not be treated as numerical. If you were to use valueAsNumber you'd find that a fractional number, would falsely trigger onChange with incorrect values. That is to say the valueAsNumber of "2." (notice the dot), is just "2". If you in turn use this as your value in your controlled component, the user would never be allowed to finish typing their number.

[milon27]

please add this feature for date and number it will be very helpfull

[msageryd]

I'll just chime in and add my 2 cents.

Way back I had a discussion with @bluebill1049 about when to cast form values to actual values. I got the advice to keep all form input as strings and handle the conversion outside of the form, i.e. when setting defaultValues and when submitting.

I did as I was adviced, and I'm very happy with this. My inputs behave much better this way than if I had tried to enforce some realtime casting.

This is what I do:

• my initial formData has correct datatypes. This is what is stored in my database.
• just before sending my formData to the form via defaultValues I convert everything to what I call "componentData". This is mostly strings, but checkboxes are booleans. This also implies that all empty values are converted to empty strings, which solves the problem with resetting the form.
• my inputFields has onChange handlers which ensures only valid format is inserted, i.e. only numeric, etc
• I actually allow both comma and dot as decimal separator. This helps with devices set to different input languages, which might give you the wrong decimal character on the keyboard.
• onSubmit converts everything back to correct datatypes (typedData), including replacing any commas with dots in numerical fields

Here is how I convert from "componentData", i.e. strings to correct datatypes.

Conversion from "typedData" to "componentData":

inputPattern is checked in onChange. If something not matching inputPattern is entered, the value is reverted to lastValue. This way it's easy to use strings as input, and also be sure that no invalid data is entered.

I found it convenient to separate componentTypes from dataTypes.

I'm sorry if my post does not answer the question. I'm just so happy with my solution, so I thought I'd share it.

[dlsso]

I think this makes the most sense. To clarify the implementation, if I am currently trying to use numbers and have something like this:

export type FormInputs = {
  title: string;
  numberField: number;
};

useForm<FormInputs>({
    values: {
      title: data.title || '',
      numberField: data.numberField || 0,
    },
})
    
// Data received from the submitted form is typed like this
const handleSubmit = (data: FormInputs) => {...}

You would change the type in both places to reflect the actual types received, and a new type (not pictured) that still has the number type would be used for the incoming data before it is converted.

export type componentTypes = {
  title: string;
  numberField: string; // Main change here
};

useForm<componentTypes>({
    values: {
      title: data.title || '',
      numberField: data.numberField || '0', // And small change here
    },
})
    
// Data received from the submitted form is typed like this
const handleSubmit = (data: componentTypes) => {...}

Am I understanding correctly?

[OlegTar]

I have object

{
     date: Date;
}

I use
onChange(convertToDate(v))

but in handleSubmit type of date is always string;