remix-forms icon indicating copy to clipboard operation
remix-forms copied to clipboard

Render inputErrors for fields that are not part of the schema as global errors

Open danielweinmann opened this issue 2 years ago • 0 comments

Let's say we're updating a user at /users/$userId/edit:

const formSchema = z.object({
  firstName: z.string().min(1),
  email: z.string().min(1).email(),
})

const mutationSchema = formSchema.extend({ userId: z.string() })

const mutation = makeDomainFunction(mutationSchema)(async (values) => values)

export const action: ActionFunction = async ({ request, params }) =>
  formAction({
    request,
    schema,
    mutation,
    transformValues: (values) => ({ ...params, ...values }),
  })

export default () => <Form schema={formSchema} />

If for any reason the userId is not present in the params, the mutation will not succeed but formAction will not return an error for the missing userId.

It would be nice if we could show them as global errors and give feedback to the developer that something is off with the wiring between Form and action. Right now, the form submission will not succeed but no error will be shown.

I'm looking for a generic way to implement this as a convention in Remix Forms: whenever we have an inputError for a field that's not part of the form schema, we make it a global error.

danielweinmann avatar Dec 12 '22 13:12 danielweinmann