Can I use modular-forms with action from "@solidjs/router"?

[ile]

How could I use modular-forms in this way (with action):

import { action, revalidate, redirect } from "@solidjs/router"

// anywhere
const myAction = action(async (data) => {
  await doMutation(data);
  throw redirect("/", { revalidate: getUser.keyFor(data.id) }); // throw a response to do a redirect
});

// in component
<form action={myAction} method="post" />

//or
<button type="submit" formaction={myAction}></button>

https://docs.solidjs.com/solid-router/reference/data-apis/action

[fabian-hiller]

In the long run, I plan to provide out-of-the-box support and documentation for SolidStart, but right now I am very busy getting Valibot into v1, so I do not have time to look into this. I am sorry.

[LukaPelgrom]

I got it working like this for the time being :)

export const addPost$ = action(async (formData: CreatePost) => {
  "use server";

  const data = createPost.safeParse(formData);
  if (data.success === false) {
    console.log("error: ", data.error.errors);
    return data.error.errors;
  }

  console.log("data: ", data);
  const user = await getUser();

  try {
    const post = await db.post.create({
      data: {
        ...data.data,
        authorId: user.id,
      },
    });
    console.log("post: ", post);
  } catch (error) {
    console.log("error: ", error);
    return error as Error;
  }

  return redirect("/posts");
}, "addPost$");

export function FormComponent() {
  const isSaving = useSubmission(addPost$);
  const submitPost = useAction(addPost$);

  return (
    <Form
      onSubmit={(data) => {
        submitPost(data);
      }}
    >
      .... some fields
    </Form>
  );
}

[fabian-hiller]

For complex form data you can have a look at my other library decode-formdata.

[ile]

For complex form data you can have a look at my other library decode-formdata.

This is great, this will do.

But there is one thing - it doesn't seem to like form fields which have an underscore in it, like price_1 ... it decodes it to a string, even though I have

    const formValues = decode(formData, {
        numbers: ['price_1'],
    });

[fabian-hiller]

Please double check your code and check the entries of your FormData object. A bug is unlikely as the library should be fully tested.

In case you found a bug and the underscore is a problem, I will try to fix it as soon as possible.

[ile]

See here :smile: https://stackblitz.com/edit/remix-run-remix-efdzbf?file=app%2Froutes%2F_index.tsx

[fabian-hiller]

You are right. There is a bug in a regex. Thank you so much! I will fix it and publish a new version.

[fabian-hiller]

Fixed

[ile]

I was thinking of regexes. :laughing:

[ile]

You did something, which I also always do, leave console.log() in the production code. :+1:

https://github.com/fabian-hiller/decode-formdata/blob/main/src/decode.ts#L82

[fabian-hiller]

Thanks for the hint! I will fix it later.