@primevue/forms: Form components submit event parameter missing values

[root5427]

Describe the bug

Prehistory

Documentation states that:

The submit callback returns an object that encapsulates the form's validity, any existing errors, and its current state. This enables access to the form values, validation status, and any errors present at the time of submission.

Also it states that:

// e.values: An object containing the current values of all form fields.

primevue/packages/forms/src/form/Form.d.ts

Lines 83 to 108 in e5af2d3

	export interface FormSubmitEvent {
	/**
	* The original DOM event.
	*/
	originalEvent: Event;
	/**
	* The form values.
	*/
	values: Record<string, any>;
	/**
	* The form state.
	*/
	states: Record<string, FormFieldState>;
	/**
	* Whether the form is valid.
	*/
	valid: boolean;
	/**
	* The form errors.
	*/
	errors: any[];
	/**
	* Resets the form.
	*/
	reset: () => void;
	}

primevue/packages/forms/src/useform/index.js

Lines 91 to 103 in e5af2d3

	const handleSubmit = (callback) => {
	return async (event) => {
	const results = await validateOn('validateOnSubmit', true);
	return callback({
	originalEvent: event,
	valid: toValue(valid),
	states: toValue(states),
	reset,
	...results
	});
	};
	};

Actual issue:

An object returned by submit callback DOES NOT have values field.

Reproducer

https://stackblitz.com/edit/primevue-nuxt-issue-template-qsshy1rm?file=app.vue

PrimeVue version

4.2.5

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

Chrome 131

Steps to reproduce the behavior

1. Install @primevue/forms.
2. Use the Form component in a Vue application.
3. Attempt to use the submit event as described in the documentation.
4. Observe that object returned by submit callback does not contain values

Expected behavior

Existence of values in an object returned by submit callback.

[undefinedhuman]

I noticed it only contains the values object if you either set the initial values parameter or if you edit the input manually.

[undefinedhuman]

They somehow changed the entire behavior of the Forms library in one of the last minor versions.

[root5427]

I noticed it only contains the values object if you either set the initial values parameter or if you edit the input manually.

Hi, @undefinedhuman.
I followed all the conditions you mentioned, but I still can't retrieve the values object. Could you provide a reproducible example, such as a link to a repository or a code snippet, where the values object exists in the submit callback return?

Thank you!

[undefinedhuman]

Sorry, my bad the states property gets populated not values:

<template>
  <Form v-slot="$form" class="flex flex-col w-full" @submit="onFormSubmit">
    <div class="flex flex-col gap-1">
      <InputText name="username" type="text" placeholder="Username" fluid />
      <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{
        $form.username.error?.message
      }}</Message>
    </div>

    <Fieldset legend="Form States" class="h-80 overflow-auto">
      <pre class="whitespace-pre-wrap">{{ $form }}</pre>
    </Fieldset>
    <Button type="submit" severity="secondary" label="Submit" />
  </Form>
</template>

<script lang="ts" setup>
import { Form, type FormSubmitEvent } from "@primevue/forms";

function onFormSubmit(e: FormSubmitEvent) {
  console.log(e.states.username.value);
}
</script>

[CamiloEspinoza]

First of all, I would like to thank everyone for their work; it is a wonderful library.

I would like to reopen this issue because, in the API section of the documentation, it still mentions that the FormSubmitEvent includes an object called values. This is very confusing.

[MomenYasser]

The PR not merged yet @mertsincan

[AVMiraga]

A temporary workaround I discovered is to pass the resolver to the Form. The resolver passed to the Form should always define all the fields, even if they are optional. If a field is omitted from the resolver, it will not be included in the submitted values (e.values).

For example, using a resolver like this:

const resolver = zodResolver(
  z.object({
    username: z.string().optional(),
    password: z.string().optional(),
  }),
);

ensures that both username and password are present in e.values. However, if the password field is not defined in the resolver, it doesn't appear in the values object.