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