#UI: Disable button on form validation errors

2 messages · Page 1 of 1 (latest)

idle pagoda
#

I'm using nuxt ui to show a form to a user. The form is validated using a zod schema (works).
The docs say I can access the api using the form ref: I understand this as myForm.errors.

Trying to bind this to the disabled-prop of my submit button doesn't do anything...

idle pagoda
#

Humm... It seems to make a difference if my form ref is a simple object, or if it's part of a nested structure.

const createForm = ref()

const forms = {
  create: {
    ...
    hasErrors: compute(() => {
      return createForm.value?.errors.length > 0
  }
}
``` vs
```ts
const forms = {
  create: {
    ref: ref(),
    ...
    hasErrors: compute(() => {
      return forms.create.ref.value?.errors.length > 0
  }
}```

First example works, second does not.