How to handle field objects like selects?

[sschneider-ihre-pvs]

So the question came up multiple times now. I am trying to make a better job of describing the problem.
All input field have one value, but in the case of something like selects, the visual representation might be consisting of more than one value.
Let's have a look at this example https://codepen.io/pen?&editors=101&prefill_data_id=9d16d04f-aa6e-4b94-962f-e8835e0f68d5
There is a select component that has a an object as value. And an array of objects as options. The value of the input field is just text while the inner input value of the component is the whole object.

My question now, is it possible to validate those objects with vee-validate and how?
For example, if I want to validate that there is a description and category is not 1 how would I do that?

[atzen88]

Unfortunately, I cannot open the link or no content is displayed.

Basically you can also equip a select field with a validator. The desired validator would look somehow like this:

defineRule('canBePicked', (value: any) => {
    // value should always be the fieldValue, so if you have an array for multiple values, this would be an array
    if (value.category && value.description) {
        return value.category === 1
    }

    return false;
});

To show a text for the picked value, you could implement a toString method or a function that displays the desired value from the object.

Here is an example of how we implemented a select (here you could pass "canBePicked" as validationRules to trigger the above defined validation):

<script setup lang="ts">
import {useField} from 'vee-validate';
import {computed, ref, toRef} from 'vue';
import OptionItem from '@/components/form/OptionItem.vue';
import ArrowDownIcon from '@/components/icons/ArrowDownIcon.vue';

const props = defineProps<{
    id: string,
    options: Record<number | string, string>,
    label?: string,
    translationPrefix?: string,
    validationRules?: string | Record<string, any>
}>()

const {value, setValue, errorMessage} = useField<number | string>(toRef(props, 'id'), toRef(props, 'validationRules'));
const open = ref<boolean>(false);

const toggleDropdown = () => {
    open.value = !open.value;
}

const onOptionSelected = (key: number | string) => {
    setValue(key);
    open.value = false;
}

const isChecked = (key: number | string) => {
    return value.value === key;
}

const closeDropdown = () => {
    open.value = false;
}

const isRequired = computed<boolean>(() => {
    return typeof props.validationRules === "string" ? props.validationRules?.includes('required') : props.validationRules?.['required']
})

</script>
<template>
    <div class="form-control d-flex flex-column" @click.self="closeDropdown">
        <label :for="props.id">
            {{ $t(props.translationPrefix + props.id) }}
            <template v-if="isRequired">*</template>
        </label>
        <div class="form-input d-flex" @click="toggleDropdown">
            <div class="select-text d-flex align-items-center justify-content-between" :class="{open}">
                {{ value ? props.options[value] : '-' }}
                <arrow-down-icon/>
            </div>
        </div>
        <div class="option-container d-none flex-column" :class="{['d-lg-flex']: open}">
            <option-item v-for="(option, key) in props.options"
                         :key="key"
                         :label="option"
                         :checked="isChecked(key)"
                         @click="onOptionSelected(key)"/>
        </div>
        <span v-if="errorMessage" class="error-message">
            {{ $t(errorMessage) }}
        </span>
    </div>
</template>

In our case, the "options" are always string/value or number/value pairs, so we don't need to convert any object, but that wouldn't be a big step if it were the case