setResponse and throwing FormError doesn't work anymore

[Przemoo16]

Again, thank you so much for a great job by creating this library!!!

After upgrading Qwik to the latest 1.3.0 version, using setResponse or throwing FormError doesn't display the response message if the validation is defined. After removing the validate property it works as expected.

Could be related to this issue: https://github.com/fabian-hiller/modular-forms/issues/158

Code to reproduce (Remove the validate={[required('Field is required.')]} to make it works):

import { $, component$ } from '@builder.io/qwik';
import {
  FormError,
  required,
  setResponse,
  type SubmitHandler,
  useForm,
} from '@modular-forms/qwik';

export type TestForm = {
  myInput: string;
};

export default component$(() => {
  const [form, { Form, Field }] = useForm<TestForm>({
    loader: { value: { myInput: '' } },
  });

  const handleSubmit = $<SubmitHandler<TestForm>>(async (_values, _event) => {
    throw new FormError<TestForm>('ERROR');
    // setResponse(form, { message: 'RESPONSE' });
  });

  return (
    <Form onSubmit$={handleSubmit}>
      <Field name="myInput" validate={[required('Field is required.')]}>
        {(field, props) => <input {...props} type="text" />}
      </Field>
      <div>{form.response.message}</div>
      <button type="submit">Submit</button>
    </Form>
  );
});

Dependencies:

    "@builder.io/qwik": "^1.3.0",
    "@builder.io/qwik-city": "^1.3.0",
    "@modular-forms/qwik": "^0.21.2",
    "@types/node": "^20.10.1",
    "typescript": "^5.3.2",
    "undici": "^5.28.2",
    "vite": "^5.0.7",
    "vite-tsconfig-paths": "^4.2.1",
    "vitest": "^1.0.1"

[fabian-hiller]

Thank you for creating this issue. I will try to fix that tomorrow.

[fabian-hiller]

I'm currently having a problem with my package manager and can't investigate it. I will try again next week. Is the problem still there? It should not be related to upgrading to Qwik v1.3.0. Also required is not related to it. So I don't think it's the reason if there is a bug.

[Przemoo16]

I'm currently having a problem with my package manager and can't investigate it. I will try again next week. Is the problem still there? It should not be related to upgrading to Qwik v1.3.0. Also required is not related to it. So I don't think it's the reason if there is a bug.

Yes, the issue continues to occur to me. I'm not sure what is the exact cause, but after removing validate property it works.

[fabian-hiller]

Ok, I will look into this in the next few weeks. For now, I recommend downgrading to an older version of Qwik.

[Przemoo16]

I'm currently having a problem with my package manager and can't investigate it. I will try again next week. Is the problem still there? It should not be related to upgrading to Qwik v1.3.0. Also required is not related to it. So I don't think it's the reason if there is a bug.

You mentioned you have a problem with package manager. If this is about the sharp package, here is the discussion about it: https://github.com/BuilderIO/qwik/issues/5556.

[fabian-hiller]

That's exactly the problem. Thanks a lot for the hint!

[Przemoo16]

Hi, were you able to reproduce this issue?

[fabian-hiller]

It works fine in my playground. When I copy your code, Qwik also fails to update the text node on my computer. Not sure what the problem is here, but it is not related to Modular Forms. You can add the following line to prove that the value is there:

<div>{JSON.stringify(form.response)}</div>

[fabian-hiller]

But I expect this to be fixed with the Modular Forms rewrite planned for the next few months, as I plan to change the way these values are stored.

[Przemoo16]

Ok, thanks for confirming the issue ;)

[dostufffancy]

it works fine

loginForm.response.message?.toString()

or

{loginForm.response.message && <div>{loginForm.response.message}</div>}

[fabian-hiller]

Hint: If you encounter this problem, it may help to access .response via the ? operator. Here is an example:

<div>{form.response?.message}</div>