[Bug]: setValue is not setting and validating transformed values in a useControlField input

[bustawin]

Which packages are impacted?

• remix-validated-form
• @remix-validated-form/with-zod
• @remix-validated-form/with-yup
• zod-form-data

What version of these packages are you using?

• remix-validated-form: 5.1.5

Please provide a link to a minimal reproduction of the issue.

https://codesandbox.io/p/devbox/charming-thunder-22r57g?file=%2Fapp%2Froutes%2Findex.tsx%3A32%2C3

Steps to Reproduce the Bug or Issue

Use useControlField<number>(name) and setValue to manually set the value of an input inside a form. The twist is that we want to alter what the user typed, which in this case to keep it simple we just set the value to a constant "42" as a number:

<input name={name} value={value || ""} onChange={(e) => setValue(42)} />

Expected behavior

If we use a validation of

const validator = withZod(
  z.object({
    name: z.number(),
  })
);

The validation should pass, but we still get an invalid form: Expected number, received string.

It feels that the library is still getting the value from the input directly, which is a string.

Moreover, if we remove the name of the input:

<input value={value || ""} onChange={(e) => setValue(42)} />

We get a Required error from the validation.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

Thanks for the library! I hope you can help me; thanks. :-)

[airjp73]

Hi! What your describing is working as intended. One of the core design decisions of this library is that the form itself is the source of truth for all the form data. So when we validate, we look directly at the form.

useControlField is analogous to just using useState. You can use it track and manipulate your form state, but it doesn't actually affect the data that comes out of the form.

To properly validate a number input, I'd recommend taking a look at zod-form-data's numeric helper.