How to preserve value in form when an action got validation errors?

[armandabric]

Hey there!

I'm struggling to use next-safe-action with a form that could be rejected with validation errors.

When the form is submit Next 15 (or React 19?) reset it, and I could not find a way to prevent it to became empty. After a submition that trigger validation errors, the action.result entry is only filled with the validationErrors. It seems there is no way to send back the data back like advised now with the react useActionState.

I have created a demo to illustrate my problem: https://codesandbox.io/p/devbox/rv6f4c

Is someone have an idea on how to do?

[SwiichyCode]

Did you find a solution ?

[armandabric]

As workaround, I remove the action and use onSubmit on the form:

      onSubmit={(event) => {
        event.preventDefault();

        myAction.execute(new FormData(event.currentTarget));
      }}

Its not a "good solution" as it bypass all the React 19 stuff but it works

[alimek]

hmm I am trying to get solution for this problem too, any better solution for this guys?

I still wanna schema validation happening

const schema = zdf.formType({
  name: zdf.text()
});

clientAction
  .schema(schema)
  .safeAction<{ name: string }>(async ({ parsedInput }) => {
    ...

    return {
         name: ...
    };
  })

but I would like to also return the client input data as part of same response, so i can pass it to defaultValue={result?.name} to my text input component.

I am out of ideas how I can be achieved (if even possible) without workaround.

@TheEdoRan sorry for pinging directly, but any idea if that is currently possible? I think I scanned doc and I cant find any info 😬

[azizk17]

You can easily include the original client input data in the handleValidationErrorsShape

.schema(schema, {
    handleValidationErrorsShape: async (validationErrors, utils) => {
        return {
            ...flattenValidationErrors(validationErrors).fieldErrors,
            data: Object.fromEntries(utils.clientInput.entries()),
        };
    },
})

That said, there are a couple of things to keep in mind. Right now, The main issue is that the data is nested inside validationErrors instead of being at the root level.

{
  "validationErrors": {
    "name": [
      "String must contain at least 5 character(s)"
    ],
    "data": {
      "name": ""
    }
  }
}

But ideally, it should look like this:

{
  "validationErrors": {
    "name": [
      "String must contain at least 5 character(s)"
    ]
  },
  "data": {
    "name": ""
  }
}

[azizk17]

I found out that the input (which is formData) actually preserves the values passed into it!

const { execute, result, status, hasErrored, isPending, input } = useStateAction(serverAction, {});