Modular Forms with SolidStart
I'm trying to use Modular Forms in my SolidStart application but am unable to get the form to submit. I've had it working before, submitting properly so trying to debug what is causing the issue now. Thank you
export type CreateApplication = {
title: string;
company: string;
};
export const addApplication = action(
async ({ title, company }: CreateApplication) => {
"use server";
const userId = await getAuthUser();
if (!userId) throw redirect("/");
const [result] = await db
.insert(application)
.values({ title: title, company: company, userId })
.returning();
return result;
},
"add-application",
);
export function CreateForm() {
const [_, { Form, Field }] = createForm<CreateApplication>();
const create = useAction(addApplication);
const handleSubmit: SubmitHandler<CreateApplication> = (values) => {
console.log("submission");
create(values);
};
const submission = useSubmission(addApplication);
return (
<>
<Form onSubmit={handleSubmit} method="post">
<Field name="company">
{(field, props) => (
<>
<input {...props} type="text" placeholder="Company" />
{field.error && <div>{field.error}</div>}
</>
)}
</Field>
<Field name="title">
{(field, props) => (
<>
<input {...props} type="text" placeholder="title" />
{field.error && <div>{field.error}</div>}
</>
)}
</Field>
<button type="submit">Create</button>
</Form>
<Show when={submission.error}>
<p>{submission.error.message}</p>
</Show>
</>
);
}export type CreateApplication = {
title: string;
company: string;
};
export const addApplication = action(
async ({ title, company }: CreateApplication) => {
"use server";
const userId = await getAuthUser();
if (!userId) throw redirect("/");
const [result] = await db
.insert(application)
.values({ title: title, company: company, userId })
.returning();
return result;
},
"add-application",
);
export function CreateForm() {
const [_, { Form, Field }] = createForm<CreateApplication>();
const create = useAction(addApplication);
const handleSubmit: SubmitHandler<CreateApplication> = (values) => {
console.log("submission");
create(values);
};
const submission = useSubmission(addApplication);
return (
<>
<Form onSubmit={handleSubmit} method="post">
<Field name="company">
{(field, props) => (
<>
<input {...props} type="text" placeholder="Company" />
{field.error && <div>{field.error}</div>}
</>
)}
</Field>
<Field name="title">
{(field, props) => (
<>
<input {...props} type="text" placeholder="title" />
{field.error && <div>{field.error}</div>}
</>
)}
</Field>
<button type="submit">Create</button>
</Form>
<Show when={submission.error}>
<p>{submission.error.message}</p>
</Show>
</>
);
}
