Vuetify: Form level validation of custom components

[mislavlukach]

I think I have a very common problem.

I am trying to integrate a input component(not vuetify component) into my form without loosing the ability to do form-level validation logic with the "rules" prop.
So I'm using v-form with with attached v-model="valid" . That field is not updated correctly because vuetify is not able to register my component and execute rules on it.

Then I realized I can connect my input component with the hidden v-text-field or v-input on it and maybe somehow connect them to work together. Well I managed to do it, "valid" is now working correctly but I'm not able to get the error message from the v-text-field component.

Here is a short snippet.

Any ideas?

Form component

<template>
  <v-flex>
    <div>
      <span>New Form</span>
    </div>
    <v-form v-model="validations.form.valid" v-on:submit.prevent="submitForm">
      <v-text-field
        label="Name"
        type="text"
        v-model.trim="form.title"
        :rules="validations.form.title" 
      />
      <text-editor :rules="validations.form.description" v-model="form.description"/>
      <v-btn
        depressed
        type="submit"
        :disabled="!validations.form.valid"
      > Create
      </v-btn>
    </v-form>
  </v-flex>
</template>

import TextEditor from './../inputs/text-editor.vue';

  export default {
    name: 'my-form',
    components: {
      TextEditor,
    },
    data: () => ({
      form: {
        title: null,        
        description: null,
      },
      validations: {
        form: {
          title: [
            (v) => !!v || 'Title is required'
          ],
          description: [
            (v) => !!v || 'Description is required'
          ],
          valid: false,
        }
      },
    }),
    methods: {
      async submitForm() {
        console.log(this.form);
      },
    },
  };

Text Editor component

<template>
  <div>
    <vue-editor
      v-model="content"
      @text-change="onContentChange($event)"
    />
{{ errors[0] }}
    <v-text-field
      ref="editor"
      style="display:none"
      v-model.trim="content"
      :rules="rules" 
    />
  </div>
</template>

import { VueEditor } from "vue2-editor";

  export default {
    props: {
      value: String,
      rules: Array,
    },
    components: {
      VueEditor,
    },
    name: 'text-editor',
    data(){
      return {
        content: this.value,
        errors: [],
      };
    },
    watch: {
      content(value) {
        const textComponent = this.refs.editor;
        const { errorBucket, validationState, validations } = textComponent;
        //const errors = 
        //two options here
        // 1 ) somehow get the error message from the textComponent
        // 2 ) write a function for checking rules manually
        this.$emit('input', this.content);
        this.$emit('errors', errors);
      }
    },
  };

[mislavlukach]

I ended up doing number 2.

So my content watcher is

watch: {
      content() {
        const textComponent = this.refs.editor;
        this.errors = checkRules(rules, this.content) 
        this.$emit('input', this.content);
        this.$emit('errors', this.errors);
      }
    },

[johnleider]

The issue board is exclusively for bugs. If you have specific questions about how to use Vuetify please check out the following resources:

• Discord community
• Stack overflow

Thank you for your contribution and interest in improving Vuetify.

[zardilior]

Docs should definetely include this!