[Feature Request]: Transform values on submit

[crutchcorn]

This feature request comes from houseform/houseform#60, the older form library I maintained

Description

Ideally, I'd like to have a number, displayed as a string (say, a locale with 1,000,000) and then transform this number back during the field submission.

 <Field
  name="number"
  initialValue={'0'}
  // This is the magic
  transformOnSubmit={v => parseFloat(v)}
  onChangeValidate={z.coerce.number().min(1, 'Must be at least 1')}
/>

[CheRayLiu]

Hey @crutchcorn, mind assigning me this for me to work on? 🙏

[crutchcorn]

Done! Thanks for taking this on @CheRayLiu.

Something worth considering is how we will/should handle TypeScript typings for transformations.

[CheRayLiu]

Unassigned myself for now as I don't see myself working on it any time soon

[crutchcorn]

No worries @CheRayLiu! Thanks for being willing in the first place :)

[gutentag2012]

Just an idea for this feature.
I am currently working on my own form library based around signals. The way I solved this transformation issue, is not by transforming the values onSubmit, but by handling the transformation on a per Field and onChange basis.

In my case, every field can have a transformToBinding function which takes the form value and transforms it for a specific input element (e.g. a number to a string) and a transformFromBinding function which does the opposite (e.g. transform a string to a number)
There is also a special handleChangeBound function (transforms the value before setting it in the form) and transformedValue attribute (the form value just run through the transformer function) that both make use of these transformers.

The benefit of this is, that the typing would be a lot easier, since the FormValues would stay the same and only a per Field type has to change (also that type could then be inferred from the transformer functions).
The second benefit is, that the form always holds the "correct" data at every point in time.

Maybe that might be something worth considering implementing here as well.

[t-rosa]

Hey @crutchcorn is this issue still up to date? If so, I think I can try to implement a small part of it.

[juanvilladev]

IMO further discussion should go into whether or not transforms on the base schema should be respected. This is how I personally would like it to work:

When we define a zod schema as the validator, the form should allow default values which align with z.input
Then the submit handler should infer the types coming from z.output. This allows us to keep the transformation and base logic in one area rather than defining a base schema that then needs to be merged with the value you pass to something like transformOnSubmit.

See my code stackblitz: https://stackblitz.com/edit/tanstack-form-zvsfcpvd?file=src%2Findex.tsx