BB
B
BBB
BBBBB
ABBABA
POST
AABBBA
A
POSTPOSTPOST
AAAABBB
B
A
zoduseActionDatanew Error("invalid username")undefined <Show when={add.error}>
<p>There was an error</p>
</Show>add.error.fieldErrors const errors = add.error?.fieldErrors || {};
return (
<div>
<Form>
<h1>Add new user</h1>
<input type="email" name="email" />
{errors["email"] && errors["email"].join(", ")}errorserrorsadd.error{}const errorsURLSearchParamsURLSearchParamscount()FormErrorform const [{ result }, { Form }] = createServerAction$(
async (formData: FormData) => {
const parsing = z
.object({
email: z.string().email(),
givenName: z.string(),
familyName: z.string(),
age: z.preprocess((v) => Number(v), z.number()),
gender: z.enum(["male", "female", "other"]),
})
.safeParse(Object.fromEntries(formData.entries()));
if (!parsing.success) {
return { success: false, errors: parsing.error.flatten() };
}
await prisma.user.create({ data: parsing.data });
return { success: true };
}
);
const [, deleteUser] = createServerAction$(async (id: string) => {
await prisma.user.delete({ where: { id } });
});
createEffect(() => console.log(result?.success)); if (!parsing.success) {
throw new FormError("Form error", {
fieldErrors: parsing.error.formErrors.fieldErrors,
});
} <Form>
<h1>Add new user</h1>
<input type="email" name="email" />
{add.error?.fieldErrors["email"] &&
add.error.fieldErrors["email"].join(", ")}const errors = () => add.error?.fieldErrors || {};
return (
<div>
<Form>
<h1>Add new user</h1>
<input type="email" name="email" />
{errors().email && errors().email?.join(", ")}// read signal's current value, and
// depend on signal if in a tracking scope
// (but nonreactive outside of a tracking scope):
const currentCount = count();
// or wrap any computation with a function,
// and this function can be used in a tracking scope:
const doubledCount = () => 2 * count();
// or build a tracking scope and depend on signal:
const countDisplay = <div>{count()}</div>;
// write signal by providing a value:
setReady(true);
// write signal by providing a function setter:
const newCount = setCount((prev) => prev + 1);const [create, { Form }] = createServerAction$(async (formData: FormData) => {
// do something with formData
}); const [create, { Form }] = createServerAction$(async (formData: FormData) => {
const parsing = z
.object({
email: z.string().email(),
givenName: z.string(),
familyName: z.string(),
age: z.preprocess((v) => Number(v), z.number()),
gender: z.enum(["male", "female", "other"]),
})
.safeParse(Object.fromEntries(formData.entries()));
if (!parsing.success) {
throw new FormError("", {
fieldErrors: parsing.error.formErrors.fieldErrors,
form: formData, // <--- fill in create.input
});
}
try {
await prisma.user.create({ data: parsing.data });
} catch (error) {
if (error instanceof Prisma.PrismaClientKnownRequestError) {
if (error.code === "P2002") {
throw new FormError("EMAIL_ALREADY_USED");
}
}
}
});
return (
<div>
<Form>
...
<Input
type="text"
name="givenName"
label="Given name"
value={(create.input?.get("givenName") as string) ?? ""}
/>