[UFormGroup] How to Revalidate UFormGroup After Manually Setting v-model

[hamonCordova]

Description

I'm using UFormGroup in my project and have a scenario where I need to invalidate a field and then manually set the v-model value without any user action. I have a component that sets the value of an input field, which can either be entered by the user or automatically selected. After manually setting the value, I want to trigger validation for the UFormGroup to reflect the new state.

How can I revalidate the UFormGroup programmatically after updating the v-model?

Expected Behavior:

Revalidate UFormGroup after invalidating the field and manually setting v-model.

Actual Behavior:

Validation does not trigger automatically after updating v-model programmatically.

Steps to Reproduce:

Invalidate a field in UFormGroup. Manually set v-model for that field. Observe that validation doesn't trigger.

[github-actions[bot]]

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

[schillerenrico]

Yeah I am interested in this too. I tested every :validate-on option on the UForm. Seems like the component needs to emit something to trigger the UFormGroup revalidation.

I have the UFormSelectMenu inside a custom component with a custom "clear" button. And the validation never triggers when the v-model is changed by the clear.

A best practice to manual trigger validation on UFormGroup would be helpful

[schillerenrico]

@hamonCordova I found something for us: https://stackblitz.com/edit/nuxt-ui-wnn5yk?file=components%2FCustomFileInput.vue

const { emitFormChange, emitFormBlur } = useFormGroup();

calling these methods trigger revalidation

[ekta-7span]

@hamonCordova I found something for us: https://stackblitz.com/edit/nuxt-ui-wnn5yk?file=components%2FCustomFileInput.vue

const { emitFormChange, emitFormBlur } = useFormGroup();

calling these methods trigger revalidation

@schillerenrico link you provided still error doesn't go away. Do you have other solution

[github-actions[bot]]

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

[romhml]

The validation can be triggered from the Form component (using form.validate({ name: 'myinput' })) or using const { emitFormChange, emitFormBlur } = useFormGroup(); like @schillerenrico suggested.