Validation in custom input components with Form and FormGroup

[ymansurozer]

Environment

• Operating System: Darwin
• Node Version: v18.19.1
• Nuxt Version: 3.10.3
• CLI Version: 3.10.1
• Nitro Version: 2.8.1
• Package Manager: npm@10.2.4
• Builder: -
• User Config: auth, devtools, experimental, extends, googleFonts, imports, mdc, modules, naiveui, pwa, routeRules, runtimeConfig, $development, tailwindcss, typescript, sourcemap, ui, vite
• Runtime Modules: @pinia/nuxt@0.5.1, @vueuse/nuxt@10.9.0, @nuxt/ui@2.15.0, @nuxtjs/google-fonts@3.1.3, @nuxt/image@1.3.0, nuxt-headlessui@1.1.5, @bg-dev/nuxt-naiveui@1.10.2, @sidebase/nuxt-auth@0.6.7, @vite-pwa/nuxt@0.5.0, @formkit/nuxt@1.4.0, @nuxtjs/mdc@0.6.1
• Build Modules: -

Version

v2.15.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-nmqxsd?file=app.vue

Description

I am building a custom input components. And I still want to use FormGroup and Form to handle validation.

As you can see in the reproduction, the error only appears when I click on the send button and does not appear otherwise. I want it to happen on each change in the custom input component.

I did try adding events like blur, change, input to the CustomFileInput component but it did not change anything.

How can I make it so that my custom inputs are validated just as when I use UInput?

Additional context

No response

Logs

No response

[ymansurozer]

I seem to have opened this as a bug, sorry. But I hope the reproduction repo helps demonstrate what I try to do better.

[romhml]

You need to use the useFormGroup composable to emit input event back to the Form component (see: https://github.com/nuxt/ui/blob/dev/src/runtime/composables/useFormGroup.ts).

Here is an example: https://stackblitz.com/edit/nuxt-ui-wnn5yk?file=components%2FCustomFileInput.vue

[ymansurozer]

Thank you very much @romhml, this works just great. Much appreciated!