Passing external validation errors into the form - is there a neater way?

[patrickbenjamin1]

I'm using tanstack forms with server based validation errors, what looks like the best approach I've found for getting those errors into the form's state is the following:

  const { setErrorMap } = useForm({
    defaultState: {
      values: initialFormValue,
    },
    onSubmit: async ({ value }) => {
      await onSubmit({
        thing: value.thing,
      })
    },
  })

  React.useEffect(() => {
    if (error && error instanceof MyValidationError) {
      setErrorMap({
        onServer: { form: error.message, fields: ValidationUtils.errorToValidationErrorsDictionary(error) },
      })
    }
  }, [error])

But this throws the error Uncaught error: TypeError: Cannot read properties of undefined (reading 'baseStore')

There's also no type safety in anything in setErrorMap - onServer is just typed as unknown

In my case, i'm in a component which just contains the form, which gets passed an onSubmit and an error from the wrapper.

Is there something glaring that I'm missing? I can't see anything in the documentation for my case

[crutchcorn]

I feel like I'm missing part of this puzzle - why not use onSubmitAsync? Can you provide a full code sample in, say, StackBlitz + Next.js/TS Start?

[patrickbenjamin1]

Wow thanks for the very fast reply - I've never seen someone respond to a Github issue in less than 2 minutes before!

Ah interesting - I hadn't thought to go down that route because I'm not making separate API requests just for validation which is how the docs suggest onSubmitAsync be used, but I guess it works just as well to make the actual request there (though it being under validators.onSubmitAsync feels like it could be a little confusing for another dev looking at this code - is there a way of applying validation errors from the standard onSubmit?)

I do still feel like it'd be handy to be able to manually put errors into form state somehow. In this set up, I'm now a bit restricted into ensuring that onSubmit throws the error directly from our API (or constructs a new error in the right shape), which in more complex theoeretical cases could end up requiring some wrangling, where just passing an error into my form's component and having that work out what to do with it makes it a little more portable.

I'm also getting some pretty ropey types with this setup:

  const { Field } = useForm({
    defaultState: {
      values: initialFormValue,
    },
    validators: {
      onSubmitAsync: async ({ value }) => {
        try {
          await onSubmit()
        } catch (error) {
          if (error && error instanceof MyValidationError) {
            return {
              form: error.message,
              fields: ValidationUtils.errorToValidationErrorsDictionary<MyFormState>(error),
            }
          }
        }
      },
    },
  })

In the below, field.state.meta.errors is typed as undefined[]

<Field name="myField">
    {(field) => (field.state.meta.errors)}
</Field>

But they're correctly typed when I access them from the state returned from useForm

state.errors[0]?.fields?.myField

What am I missing here? Is there something I've missed off that allows TS to infer the types of the validation errors?

ValidationUtils.errorToValidationErrorsDictionary returns a dictionary of type Record<keyof T, string> where T is the same type given to initialFormValue if that helps