transform number to string (react hook form)

[megacherry]

hi @ all,

i have an input "weight" and react hook form. weight can be between 1 and 1000. but with react hook form and controlled inputs the inputs are always string. so how can i transform the input (string) to number and validate it correctly?

here is a playground example: https://valibot.dev/playground/?code=JYWwDg9gTgLgBAKjgQwM5wG5wGZQiOAcg2QBtgAjCGQgbgCh6BjCAO1XgGUmALAUxDI4AXkwA6CBQBWfJjAAUAb3pw4Adz7AA5jxgAucWGBg+8jGNYBXEBT5R5ASgA04kMFYA1MpdMBGZ67IAB5epD7yvgAM0Q4O9AC+DgzMbBxwUHyolqTwouaoyNh8AArIUKim3PyCLsqqGtq6BoQAnL6ETglJjCzsEKR8YqQQWvIZWTlJQA

best regards,
Andy

[fabian-hiller]

Here is an example:

import * as v from 'valibot';

const Schema = v.object({
  weight: v.pipe(
    v.string(),
    v.transform(parseInt),
    v.minValue(1),
    v.maxValue(1000),
  ),
});

And to make sure the output of transform is not NaN you can add number after:

import * as v from 'valibot';

const Schema = v.object({
  weight: v.pipe(
    v.string(),
    v.transform(parseInt),
    v.number(),
    v.minValue(1),
    v.maxValue(1000),
  ),
});
``

[megacherry]

thanks, fabi.