N
Nuxt•2w ago
Just Simeon

Form with components containing FormInputs

I am using a UForm for a bigger form we have, it has multiple steps which are separated into their own components. Each component is conditionally rendered inside the UForm and they share a common schema and state (the same one that the form uses). my current Idea is to trigger the validation manually once the user presses the next step button but still keep the normal FormInput error display. However since the FormInputs are in their own components, the error is not properly set and therefore not displayed. Is there a way to fix this?
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @Just Simeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand your challenge with using UForm across multiple components with conditional rendering. This is a common issue when working with form validation in Nuxt UI. When you have FormInputs in separate components, they need to be properly connected to the parent Form's validation system. The issue you're experiencing is likely because the form field components in child components aren't properly receiving the validation errors from the parent form. There are a few approaches to solve this: 1. Use proper naming in FormField components Make sure your FormField components in child components have the correct name prop that matches the path in your validation schema. For nested objects, use dot notation (e.g., name="user.email"). 
<UFormField label="Email" name="email">
  <UInput v-model="state.email" />
</UFormField>
<UFormField label="Email" name="email">
  <UInput v-model="state.email" />
</UFormField>
2. Use the useFormField composable For custom components that contain form inputs, you can use the useFormField composable to integrate with the Form component: 
<script setup>
const { inputId, emitFormBlur, emitFormInput, emitFormChange } = useFormField()
</script>
<script setup>
const { inputId, emitFormBlur, emitFormInput, emitFormChange } = useFormField()
</script>
This helps ensure your custom components properly emit the events that the Form component listens for. 3. For manual validation in multi-step forms If you're manually triggering validation on "next" button clicks, you can use the Form component's exposed methods. First, get a reference to your form: 
<script setup>
const form = useTemplateRef('form')

function validateCurrentStep() {
  // Validate only specific fields in the current step
  form.value?.validate({ 
    name: ['field1', 'field2'], // Fields in current step
    silent: false
  })
}
</script>
<template>
  <UForm ref="form" :schema="schema" :state="state">
    <!-- Your conditional components here -->
    <UButton @click="validateCurrentStep">Next</UButton>
  </UForm>
</template>
<script setup>
const form = useTemplateRef('form')

function validateCurrentStep() {
  // Validate only specific fields in the current step
  form.value?.validate({ 
    name: ['field1', 'field2'], // Fields in current step
    silent: false
  })
}
</script>
<template>
  <UForm ref="form" :schema="schema" :state="state">
    <!-- Your conditional components here -->
    <UButton @click="validateCurrentStep">Next</UButton>
  </UForm>
</template>
The Form component exposes several methods including validate() which can be used to validate specific fields. 4. Error patterns for complex scenarios For more complex scenarios, you can use the error-pattern prop on FormField to match error names using regular expressions: 
<UFormField 
  label="Email" 
  name="email" 
  :error-pattern="/^email/"
>
  <UInput v-model="state.email" />
</UFormField>
<UFormField 
  label="Email" 
  name="email" 
  :error-pattern="/^email/"
>
  <UInput v-model="state.email" />
</UFormField>
This is particularly useful when dealing with array fields or when the error name might not exactly match the field name. Remember that the Form component automatically triggers validation on input events (blur, change, input), which you can control using the validate-on prop if needed. If you need more specific help, please share your component structure and how you're currently implementing the validation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@294593079812292609> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?