form.value.setErrors is undefined

[hckhanh]

Environment

• Operating System: Darwin
• Node Version: v20.14.0
• Nuxt Version: 3.12.2
• CLI Version: 3.12.0
• Nitro Version: 2.9.6
• Package Manager: bun@1.1.17
• Builder: -
• User Config: devtools, extends, modules, runtimeConfig, image, nitro, ui, formkit, tailwindcss, i18n, eslint
• Runtime Modules: @nuxt/eslint@0.3.13, @nuxt/ui@2.17.0, @nuxt/fonts@0.7.1, @nuxt/image@1.7.0, @pinia/nuxt@0.5.1, @nuxtjs/tailwindcss@6.12.0, @formkit/nuxt@1.6.5, @vueuse/nuxt@10.11.0, @nuxtjs/i18n@8.3.1
• Build Modules: -

Version

3.12.2

Reproduction

I try to follow this example on docs:

<script setup lang="ts">
import type { FormError, FormSubmitEvent } from '#ui/types'

const state = reactive({
  email: undefined,
  password: undefined
})

const form = ref()

async function onSubmit (event: FormSubmitEvent<any>) {
  form.value.clear()
  try {
    const response = await $fetch('...')
    // ...
  } catch (err) {
    if (err.statusCode === 422) {
      form.value.setErrors(err.data.errors.map((err) => ({
        // Map validation errors to { path: string, message: string }
        message: err.message,
        path: err.path,
      })))
    }
  }
}
</script>

<template>
  <UForm ref="form" :state="state" @submit="onSubmit">
    <UFormGroup label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormGroup>

    <UFormGroup label="Password" name="password">
      <UInput v-model="state.password" type="password" />
    </UFormGroup>

    <UButton type="submit">
      Submit
    </UButton>
  </UForm>
</template>

Description

Is there anything is out of dated compare to the latest version of nuxt?

Additional context

Logs

No response

[romhml]

Hello! It looks like you're trying to use the function before the component is mounted:

form.value?.setErrors(/* ... */); // This will be undefined since the component is not mounted

onMounted(() => {
  form.value.setErrors(/* ... */); // This will be defined
});

See: https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs

[hckhanh]

The onSubmit function is called after the component is mounted

[romhml]

Can you send me a reproduction using Stackblitz so I can have a look? I can't reproduce the issue from the documentation's example

[gregorvoinov]

hi, I run in the same problem. do your response have a path? My solution was to set it manually

const swwError = ref(false); //somethingWentWrongError
const form = ref();
const onSubmit = async (event) => {
  try {
    const data = await authStore.create(event.data);
    router.push("/");
  } catch (error) {
    //email exists already
    if (error.response.status === 422) {
      form.value.setErrors([
        {
          message: error.response.data.message,
          path: "email",
        },
      ]);
    } else {
    // For all other errors, a standard error message is displayed at the top of the form
      swwError.value = true;
    }
  }

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.