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
}

score 27 · Answer 1 · answered Nov 25 '19 at 04:42

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 use reference the child component from parent component in this way.

In 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 then using complex ways and it worked for me.

score 7 · Accepted Answer · edited Aug 04 '19 at 21:07

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.

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? — Flora, Jan 24 '19 at 10:27
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 — Flora, Jan 24 '19 at 11:44
@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. — Harshal Patil, Jan 24 '19 at 14:54

Vuelidate: validate form with sub components

2 Answers2