How to apply validation on nested components

[Fabian-Raeskinet]

Hello,

I have a question regarding validation with nested components.

I mean by "nested components" :

I have a component called PhoneBox in which I have two custom components

<PhoneBox v-model="mobile" label="Phone" name="xxx"></PhoneBox>

PhoneBox component :

<template>
      <textbox v-model="countryPrefix" :name="xxx"></textbox>
      <textbox  v-model="phoneNumber" :name="xxx" ></textbox>
      <ErrorMessage :errors="errors" />
</template>

The textbox component is a wrapper from input used with UseField with its own ErrorMessage. Everything is working correctly when playing with validations, they can show their own ErrorMessages (that can be hidden with the hide-error properties).

I would like to find a way to create a validation rule, that I can pass in the PhoneBox component, that will be applied to the 2 textbox.

For now, I have 1 solution that get me close to a solution, but I am stuck...

I created a schema like:

const schemaValidation = yup.object({
  rules: yup.object({
    countryPrefixRule: yup.string().required(),
    phoneNumberRule: yup.string().required()
  })
})

const form = useForm({
  validationSchema: schemaValidation
})

that I send in the PhoneBox component:

<PhoneBox v-model="mobile" label="Phone" name="rules"></PhoneBox>

In the component I applied the rules like this.

      <textbox v-model="countryPrefix" hide-error :name="`${name}.countryPrefixRule`"></textbox>
      <textbox v-model="phoneNumber" hide-error :name="`${name}.phoneNumberRule`"></textbox>
      <ErrorMessage :errors="errors" />

with declaring the UseFiled like :
const { value, meta, errors } = useField<string | null>(props.name as string)

it triggers correctly the errors of the 2 textBox

As you can see, the errors are triggered at the TextBox level, but I would like that it triggers the error at the PhoneBox component level.

I have the feeling that I need to complete the schema with somthing like this:

const schemaValidation = yup.object({
  rules: yup.object({
    countryPrefixRule: yup.string().required(),
    phoneNumberRule: yup.string().required()
  })**.required()**
})

But I don't find anything in the documentation :/

Did you already had this kind of situation ?

Thank for the answers !

[logaretm]

This would be an advanced use case, I probably should add an example for that in the docs.

So you should try to think of the Phonebox as a single input regardless if it is a compound input with two textboxes. One way to do that is to mark both fields inside the phone box as "uncontrolled". This will prevent the fields from being picked up by the form, this is the first step.

Then you will use useField inside the Phonebox component to represent the total phone value. You will need to manage the value with watch and handleChange to properly set the value. Any errors should be picked up by the errors from that useField using the same validation rules as the one you have here.

I may add an example later, but this is minor guidance that can help you. Let me know if face further issues till I get around to adding that example.

[zwirn1981]

I have the same problem. We have a parent component with useForm including 4-5 input fields (firstname, lastname ....) and a child component in which the address (street, zip, city, etc.) has been swapped out. Since this is used in several places in the application. It would also be good to define only the yup schema for firstname, lastname and address in the parent component. The yup for street, zip and city should only be defined as part of address in the child component only. All errors should be recognized in the parentcomponent with useform.

Parentcomponent with useform

const schema = yup.object().shape({
firstname: yup.string(),
lastname: yup.object(),
adress: yup.object() .shape( ## refer to childcomponent ##)
})

Childcomponent

const schema = yup.object().shape({
street: yup.string(),
city: yup.string(),
})

I can't really get it to work either. That's why it would be very important for me to get an advanced example.

Thank you for your effort