how to add hidden parameters in <Form /> directive in QWIK?

Question

have a simple form whit phonenumber, but i need to add some params to the formData to send to "".

Form:

      <div class="regis-form-trigger">
        <input type="text" name="phone" ref={phoneInput} onInput$={onInputNr} />
        <button class="submit-btn" type="submit" ref={submitBtn} disabled></button>
      </div>
    </Form>

action:

export const useRegFormAction = globalAction$(async (formData: JSONObject, { env }: RequestEventAction): Promise<any> => {

I expect to receive params here
  console.log('# formData: ', formData);
});

! I would prefer not to use

onSubmit$={() => ...}

because when i use it with the onSubmit method is not being called and it performs a get request to the same url.

When i change the to a normal html "form tag", the method is called but i get this error instead:

Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLButtonElement'
    |     property '_qc_' -> object with constructor 'Object'
    --- property '$element$' closes the circle
    at JSON.stringify (<anonymous>)
    enter code here

Answer 1

You can use input type="hidden".
Here is an example:
console.log result ==> my form data { 'hidden-input': 'secret', phone: 'a' }

import { component$ } from '@builder.io/qwik';
import { Form, routeAction$ } from '@builder.io/qwik-city';

export const useFormAction = routeAction$(async (data) => {
    console.log('my form data', data);
    return { success: true };
});

export default component$(() => {
    const formAction = useFormAction();
    return (
        <Form action={formAction}>
            <div class='regis-form-trigger'>
                <input type='hidden' name='hidden-input' value='secret' />
                <input type='text' name='phone' />
                <button type='submit'>Submit</button>
            </div>
        </Form>
    );
});