Form values are not parsed before validation

[beerose]

What is the problem?

Form values are not parsed before validation in Blitz setup with React Final Form.

Steps to Reproduce

1. Create a new Blitz project with React Final Form
2. Add field age (number) to, for example, sign up form (or any other form).
3. Fill input age with some value.
4. There's Expected number, received string error:

Versions

macOS Big Sur | darwin-x64 | Node: v12.18.3

blitz: 0.27.1 (local)

---

I guess the generated Form.tsx has a missing step — a transformation of the values before the validation:

validate={(values) => {
  if (!schema) return
  try {
    // if schema.key is zot.number then values[key] = parseFloat(values[key])
    schema.parse(values)
  } catch (error) {
    return error.formErrors.fieldErrors
  }
}}

I could submit a PR with a fix if no one else is working on it.

---

cc @zolwiastyl @hasparus

[flybayer]

Hey @beerose! You do that in react-final-form with the parse option which you can add to the useField options.

parse: (value) => Number(value)

[beerose]

Hey @flybayer! Thanks for the answer. I get it, but the thing is that the starter code doesn't work out of the box with types other than string.

I was hoping that it could be covered in the generated code — either inside a function that is passed as validate prop to FinalForm component or inside starter components using useField hook. The point isn't how to do this, but rather that it would be cool to have other types working out of the box as well.

It's more of a question of expectations. In my opinion, the starter code should either do less (have fewer abstractions on forms and, for example, use FinalForm inline), or do more (work with different form values types).

[hasparus]

Hi folks :wave:

Seeing "number" in LabeledTextField types I expect I can use it with numbers, and I'd expect it just works with zod and the Form component from components/Form.tsx.

Removing this "number" would also solve the problem for me and tell me "write your own number input, mate", this one doesn't support numbers.

[hasparus]

This change (based on https://github.com/blitz-js/legacy-framework/issues/988) would also satisfy that number in types IMHO.

[Kosai106]

Thanks for the suggestion @hasparus, it solves the issue nicely on my end.

[flybayer]

@hasparus @Kosai106 yes, that's a very good change! One of you want to make a PR for that?

[vivek7405]

I'm facing the same issue with react-hook-form. Can someone please suggest a fix for the same?

[beerose]

@vivek7405 probably this will do it: https://react-hook-form.com/advanced-usage#TransformandParse

[vivek7405]

Thanks @beerose, will give it a try