Custom input in Field component

[the-nightling]

Hi, thanks for the awesome library.

I have a custom input component that can be used with or without validation. As such I'd like to exclude any validation logic in that custom component and keep all validation logic in the parent component that contains Form.

I've created a minimal example here:
https://codesandbox.io/s/veevalidatecustominput-0l5mos?file=/src/components/CustomInput.vue

However, I'm unable to use the following:

<Field name="password"
       v-model="user.password"
       v-slot="{ field, errorMessage }"
       rules="required"
      >
        <div>
          <CustomInput :id="'password'" v-bind="field" />
          <span>{{ errorMessage }}</span>
        </div>
      </Field>

I've tried having the CustomInput emit the internal input's change, input & blur events and call handleChange & handleBlur from the slot prop but that didn't work. The input stays blank while displaying the validation message.

Is it possible to have a custom input in the Field component? If so can you give me any pointers.

P.S. I've seen the examples with useField but I'm trying to avoid having useField in the CustomInput component.

[logaretm]

Hello. So if you inspect the contents of field binding object, it looks like this:

<pre>{{ field }}</pre>

{
  "name": "password",
  "onBlur": [
    null,
    null
  ],
  "onInput": [
    null
  ],
  "onChange": [
    null
  ],
  "value": null
}

Note that it doesn't have any listeners for update:modelValue, this is because vee-validate doesn't assume you are using a custom component or a native element, especially since you can name your model events anything in Vue 3.

So for this case you may need to handle it manually by pulling in handleChange from the scoped slot:

<Field
  name="password"
  v-model="user.password"
  v-slot="{ errorMessage, handleChange }"
  rules="required"
>
  <div>
    <CustomInput :id="'password2'" @update:modelValue="handleChange" />
    <span>{{ errorMessage }}</span>
  </div>
</Field>