Form: reset form values outside of a Form component

[damuso]

Describe the bug

I am using the vue-query library for backend communication. After a successful request, I want to reset the form values. However, there is currently no way to access the reset function outside of the Form component because the $form variable (declared as v-scoper="$form") exists only within the Form component scope.

Upon reviewing the source code, I found a useForm function, similar to the one in vee-validate. However, since PrimeVue automatically registers all fields and defineField behaves differently, I cannot define $form outside the component using this function.

Example code:

<script setup lang="ts">

const formValues = ref({
  email: "",
});

const { isPending, mutate } = useMutation({
  mutationFn: (email: string) => apiRequest(email),
  onSuccess: () => {
    // TODO: how to reset form values? 
  }
});

const onSubmit = async ({ valid, values }: FormSubmitEvent) => {
  if (!valid || isPending.value ) return;
  mutate(values.email);
};
</script>

<template>
<Form
  v-slot="$form"
  :initial-values="formValues"
  @submit="onSubmit"
>
  <div class="flex flex-col gap-1">
    <FloatLabel>
      <InputText name="email" type="text" fluid />
      <label for="email">Email</label>
    </FloatLabel>
  </div>
</Form>
</template>

Reproducer

https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-prtoxz

PrimeVue version

4.2.1

Vue version

3.x

Language

ALL

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[jsodeman]

I would also like to see some of the Form functionality exposed to code, like .reset() , .validate(), .submit()

[jsodeman]

https://github.com/orgs/primefaces/discussions/2984

[Riyyi]

This seems to work for me:

<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit">
    <InputText v-model="formData.title" name="title" type="text" placeholder="Title"
</Form>

<script setup lang="ts">
const initialValues = ref({
	title: ""
});

const formData = ref({ ...initialValues.value }); // copy data from initialValues

async function onFormSubmit(e: FormSubmitEvent) {
    if (e.valid) {
        // Reset the form
        formData.value = { ...initialValues.value }; // copy data from initialValues
    }
}
</script>

Note: I had to set both v-model and name on the InputText component.

[lzatloukal]

What is the current status of this ticket, please? I would also like to have the form methods validate(), reset(), and submit() available in the component.

[github-actions[bot]]

This issue has been marked as a duplicate and has been closed. Please refer to the original issue for updates. Thank you!