Vuelidate: validate form with sub components

Question

How to work with validations of nested components inside a parent component with Vuelidate? I would like to change parentForm.$invalid if inputs in subcomponents are valid or not.

Parent:

<parent-component>
  </child-component-1>
  </child-component-2>
</parent-component>

validations: {
  parent: WHAT HERE?
}

Child-1

<child-component-1>
  </some-input>
</child-component-1>

data() {
  return {
    someInput: ""
  };
},

validations: {
  someInput: required
}

Child-2

<child-component-2>
  </some-input>
</child-component-2>

data() {
  return {
    someInput: ""
  };
},

validations: {
  someInput: required
}

Misquote

Answer 1

The simplest way to get started with vuelidate for sub-components/form is to use Vue.js dependency injection mechanism provided by provide/inject pair. The $v instance created in parent component can be shared with children component.

As you more fine tune it, you can use Vuelidate data-nesting and only pass a subset of $v to your subcomponents. This is a roughly similar approach to how Angular does with nested Forms. It would look something like:

export default {
    data() {
        return {
            form1: {
                nestedA: '',
                nestedB: ''
            } /* Remaining fields */
        }
    },
    validations: {
        form1: {
            nestedA: {
                required
            },
            nestedB: {
                required
            }
        },

        form2: {
            nestedA: {
                required
            },
            nestedB: {
                required
            }
        }
    }
}

Alternately, you can declare independent instances of $v for each component. In your case, you will have one for parent and two for children. When you hit the submit button, get the reference of child component using $refs and check if nested form within the child component is valid or not.

Scurry

Hi! Thanks for the answer. I would like to declare independent instances of $v for each component. BUT! I would like to achieve a mechanism to automatically disable/enable the 'submit' button when the form is valid or not. Is it possible? – Misquote

Here, I see a problem when I pass a subset of $v. I need to pass a subset of $v but a subset of the form from data() too. Otherwise, data from inputs don't pass to $model. I can't use a submodel in a subcomponent. @HaHarshalPatil – Misquote

@Damaris, when you pass a subset of $v, instead of binding v-model to component props, you should bind it to $v model directly like $v.form1.firstName.$model. You get a copy of each field in a model. Also, when you have multiple $v instances, you cannot really do this directly. You have to query children components, get their Vuelidate instance and manually check to disable the submit button. – Scurry

Answer 2

I might not be an expert in Vue. If you have declared validations in the child component and you want to access it from the parent component you can reference the child component from the parent component in this way.

In the parent component, it would be like

<template>
<my-child ref="mychild"> </my-child>
</template>

You can access the validations declared in my-child component which is $v object using

this.$refs.mychild.$v

and then you can use validations of child component in parent components with such ease. Hope this will make the job much easier than using complex ways and it worked for me.

Claussen