Nuxt•9mo ago

UI: Disable button on form validation errors

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...

1 Reply

FloOP•9mo ago

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
  }
}

const createForm = ref()

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

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

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

First example works, second does not. (if I have to guess: I can't define the ref and access it in the same step?)

Gaming

Programming

UI: Disable button on form validation errors