felte icon indicating copy to clipboard operation
felte copied to clipboard

error store is empty , but isValid is false

Open army-u8 opened this issue 1 year ago • 1 comments

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

image

Additional context

No response

army-u8 avatar Apr 25 '24 07:04 army-u8

Same issue as https://github.com/pablo-abc/felte/issues/248

sea-grass avatar May 17 '24 21:05 sea-grass