Custom Input field with multiple <input /> Elements

[Johannes-Schiel]

Just a quick question in the community, is it possible to create a "fake" ? With multiple real elements like angular reactive forms. This consists of various individual input fields I would like to show the user individual fields which are considered by vee-validate as one field. Is that possible?

[logaretm]

I would say yes but I need to see an example of what you mean by "fake" fields. Do you have an online example around or a 3rd party one?

[Johannes-Schiel]

my plan would be something like a custom date Field

<input type="text" name="day" .... />
<input type="text" name="month" .... />
<input type="text" name="year" .... />

But when i add useField on every change in each field the reactivity of vee-validate starts and i only what to create a change if everything is valid.

[logaretm]

You don't have to use useField for every one. You can use it for all 3.

const day = ref(1);
const month = ref(1);
const year = ref(2023);
const { value, handleChange } = useField('date');

function onFieldChange(e: Event) {
  // update the ref value for that field.
  if (day && month && year) {
    handleChange(`${day}/${month}/${year}`); // or whatever way you want to store the date.
  }
}