vee-validate 4 validate custom component

[outOFFspace]

I have a form with the Quill editor component:

<quill-editor name="description" theme="snow" v-model="form.description" id="description"/>

I can't use useField like here in the example: https://stackblitz.com/edit/vee-validate-v4-custom-inputs?file=src%2Fcomponents%2FTextInput.vue

How I can validate such a component?

[logaretm]

What is preventing you from using useField with it? You can either create a component that wraps the quill editor and calls useField or you could useFieldModel available from useForm to create a model that validates when changed.

Can you create a minimal example of what you tried and doesn't work?

[outOFFspace]

<template>
  <Form class="mt-30" @submit="onSubmit">
    <quill-editor name="text" v-model="text" />
    <span>{{ errors.text }}</span>
    <div class="form-group mt-50">
      <button class="btn btn-lg">Submit</button>
    </div>
  </Form>
</template>

<script>
import { QuillEditor } from "@vueup/vue-quill";
import { Form, useForm } from 'vee-validate';

import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  name: 'editor',
  components: {Form, QuillEditor},
  setup() {
    const { errors, useFieldModel, handleSubmit } = useForm();
    // how to apply the validation rules here?
    const text = useFieldModel('text');
    const onSubmit = handleSubmit.withControlled(async values => {
      console.log('values', values)
      // values.text === undefined
    });
    return { text, errors, onSubmit }
  },
}
</script>

[logaretm]

models aren't controlled values, so withControlled will filter the text out. Controlled values are values created with useField, this may change in the future but for now this is how it behaves.

[outOFFspace]

Even without withControlled, it still gives me undefined and no error displayed

[faruksaldir]

Even without withControlled, it still gives me undefined and no error displayed

@outOFFspace Quill Editor can't create dom element it because it doesn't have a value. So try this. <quill-editor name="text" v-model:content="description" contentType="html" /> const { value: description, errorMessage: descriptionError } = useField('description'); description.value = '';