zod schema form validation

[andreabasile]

For what version of Nuxt UI are you asking this question?

v3.0.0-alpha.x

Description

I have a login page with schema validation, and the :state is passed as undefined, but everything works without problems.

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

I have a second page with a form that I want to pre-fill with data retrieved from an API. I declared the reactive state to use as the form's state and set the properties with values, but in this case, the validations do not work.

const state = reactive({
  externalCode: props.item.externalCode,
  imageUrl300x200: props.item.imageUrl300x200,
  name: props.item.name,
  shortDescription: props.item.shortDescription,
  purchasePrice: props.item.purchasePrice,
  vatOnSale: props.item.vatOnSale,
  category: props.item.tags.find(tag => tag.category.type === 'COURSE')?.id || 0,
  filters: props.item.tags.filter(tag => tag.category.type === 'FILTER').map(tag => tag.id)
});

How can I set up a form with pre-filled data while keeping the validation?

Thanks!

[romhml]

Hello! What's the issue with validation on the last example? Pre-filling the form should work, but the validation will only occur after the user interacts with a fields or submits it. If you want the validation to happen when the page loads, you should call the validate function when the page is mounted.

Would you mind sharing a reproduction so I can look into this further?