felte
felte copied to clipboard
error store is empty , but isValid is false
Describe the bug
I'm not sure what's causing this, when I use zod discriminatedUnion felte/solid the felte error store is empty, but the zod.safeparse.error.issue is not empty and has a value, and felte isValid is true
Which package/s are you using?
@felte/solid (SolidJS), @felte/validator-zod
Environment
- OS:
- Browser:
- Version:
To reproduce
No response
const App: Component = () => {
const schema = z.discriminatedUnion('status', [
z.object({
status: z.literal('a'),
value: z.tuple([
z.object({
name: z.string().min(1, 'enter name'),
password: z.string().optional(),
}),
z.object({
name: z.string().optional(),
password: z.string().optional(),
}),
]),
}),
z.object({
status: z.literal('b'),
value: z.tuple([
z.object({
name: z.string().optional(),
password: z.string().optional(),
}),
z.object({
name: z.string().optional(),
password: z.string().optional(),
}),
]),
}),
]);
const [zodErr, setZodErr] = createSignal<z.ZodIssue[]>();
const { form, data, setData, isValid, errors } = createForm({
initialValues: {
status: 'a',
value: [
{ name: '', password: '1234' },
{ name: '121', password: '1234' },
],
},
onSubmit: () => {},
// ...
extend: validator({ schema }),
// ...
});
const zodErros = () => {
const res = schema.safeParse(data());
if (!res.success) {
setZodErr(res.error.issues);
}
};
createEffect(() => {
console.log(' zod error---', zodErr());
console.log(' felte error---', errors());
});
return (
<div class={styles.App}>
<header class={styles.header}>
<form ref={form}>
<div>status: {data().status}</div>
<button
onClick={() => {
setData('status', 'a');
zodErros();
}}
>
set status a
</button>
<button
onClick={() => {
setData('status', 'b');
zodErros();
}}
>
set status b
</button>
</form>
<div>isValid :{`${isValid()}`}</div>
<div>stata:{errors().status} </div>
<For each={errors().value}>
{(errors) => (
<div>
<div>name erros:{errors.name}</div>
<div>password erros:{errors.password}</div>
</div>
)}
</For>
<Show when={zodErr()}>
<div>zod errors</div>
</Show>
<For each={zodErr()} fallback={<p>no zod erros</p>}>
{(errors) => (
<div>
<div>error code:{errors.code}</div>
<div>error msg:{errors.message}</div>
<div>error path:{errors.path.toString()}</div>
</div>
)}
</For>
</header>
</div>
);
};
Small reproduction example
https://stackblitz.com/edit/solidjs-templates-y7es6r?file=src%2FApp.tsx,src%2Findex.css,src%2Findex.tsx
Screenshots
Additional context
No response
Same issue as https://github.com/pablo-abc/felte/issues/248