T
TanStack•7mo ago
robust-apricot

Remix integration

Hi, trying out the new Form library with a React Router (Remix) app. Feels really good, but I'm struggling to get errors from the server into the formfields. The example also has server validation, but the errors are returned in the global formErrorsMap instead of the errors of the fields. Anyone knows if I'm missing something or if it is not possible to return them in the fields? Made a small fork from the example using zod: https://stackblitz.com/edit/tanstack-form-5jswndpa?file=app%2Froutes%2F_index%2Froute.tsx&preset=node
Kenneth Van den Berghe
StackBlitz
Form Remix Example (forked) - StackBlitz
Run official live example code for Form Remix, created by Tanstack on StackBlitz
4 Replies
fair-rose
fair-rose•7mo ago
Hi, I also have a question about this. In the example docs, they pass the formOpts to the createServerValidate. It works fine but what if the formOpts needs to be defined in the main component to receive initial data from loader. In that case, do we really need to create 2 different formOpts?
robust-apricot
robust-apricotOP•7mo ago
the only thing I see the formOptions being used for in the source code of createServerValidate is for typescript. In the source code it only uses onServerValidate I think.
rare-sapphire
rare-sapphire•7mo ago
Currently, there is only support for accessing the formState to get the formErrors and render them separately, one at a time. I found this issue that references (and has a workaround for) this same problem: https://github.com/TanStack/form/issues/1260
GitHub
FieldAPI: state.meta.errors are not updating properly when using se...
Describe the bug Basically, the field.state.meta.errors (field as AnyFieldApi) is not properly set (i.e. differs from form.store.state.errors) when using transformation to properly handle server-si...
rare-sapphire
rare-sapphire•7mo ago
If you would like to show the errors below respective fields, you could (for now) look into this approach too: 
{formErrors.map(
        (error) =>
          error?.age &&
          error?.age.map((fieldError) => (
            <p key={fieldError.message} className="text-red-700">
              {fieldError?.message}
            </p>
          ))
      )}
{formErrors.map(
        (error) =>
          error?.age &&
          error?.age.map((fieldError) => (
            <p key={fieldError.message} className="text-red-700">
              {fieldError?.message}
            </p>
          ))
      )}
(it's a bit painful but it's what we have right now, there will be support for better integration with server validation errors in the future)

Did you find this page helpful?