Typecast form values before validation

[twisted1919]

I have a list of numeric values, something like [1, 2, 3, 4, 5] which should be treated as such(defined in ts as number[]).
These values come from a checkbox list, so the user basically selects them, which means I end up with a list of strings instead of a list of numbers, so I get ['1', '2', '3'], which obviously fails validation because I expect to validate against numbers in this array.

What should I do in order to tell react-hook-form that I want to treat the values of some fields in a different way than strings?
I feel this is something simple that I am missing.

I tried a combination of watch and setValue which failed miserably.

What seems to work, is to typecast in the resolver:

const methods = useForm<MyForm>({
    resolver: (data: MyForm, context, options) => {
        data.categories = data.categories.map(id => Number(id));
        data.typeId = Number(data.typeId);

        const resolver = classValidatorResolver(MyForm, {
            validator: {
                groups: [`step:${formState.currentStepNumber}`],
                stopAtFirstError: true
            },
        });
        return resolver(data, context, options);
    },
    reValidateMode: 'onSubmit',
    defaultValues: formState,
});

but I don't know if this is okay or there's a better way.
Also, stopAtFirstError doesn't work.

Thanks.

[tparvi]

We had similar issue with one component where custom select would always return the selected value as string even though our form had number. Fixed it by converting the value back to number before calling field.onChange.

[twisted1919]

Can you show an example?

[tparvi]

Sure. In our case the SomeDropdown only accepts strings so we just convert the selectedItem to string and back to number like so:

type MyForm = {
  selectedItem: number;
}

type CustomDropdownProps = {
  control: Control<MyForm>;
}

export function CustomDropdown(): React.ReactElement {
  const {field} = useController({control: props.control, name: 'selectedItem'});
  
  function onChange(value: string) {
	field.onChange(parseInt(value, 10));
  }

  return <SomeDropdown selected={field.value.toString()} onChange={onChange}/>
}

[twisted1919]

Thank you, while my implementation is different, this has put me on the right track.