Radio Group, can't use field errors from child component

[zkulbeda]

Hi, I try to implement dynamic radio group with validation. I would like to show error below the last input in component. I use useFieldError and useIsFieldTouched in <RadioGroup> and useField in <RadioInput>, but on first render there is an error, that field name isn't defined yet. I understand the error, but I suppose calling useField to take an error in parent component isn't proper choice. The structure I tried to implement:

<RadioGroup :values="[1,2,3]" name="example">
    <RadioInput/>
<RadioGroup>

// RadioGroup.vue 
<template>
  <div>
     <!-- stuff -->
     <slot v-for="..."/>
     <span v-if="error">{{error}}</span>
  </div>
</template>

<script setup>
// defineProps
const fieldError = useFieldError(name);
const isTouched = useIsFieldTouched(name);
const error = computed(() => isTouched.value ? fieldError.value : null);
// provide name & values to child
</script>

Have you any ideas how to implement this correctly?
Should I use all field logic in RadioGroup component and make RadioInput stateless?

[zkulbeda]

I can't use <ErrorMessage> because I display input hint if there is no error, and use <Transition> to animate error appearance. So, I just copied code from useFieldError.ts and useIsFieldTouched.ts into <RadioGroup>. I wonder, why there is warn in useIsFieldTouched, but there isn't in useFieldError? I would like to have something like useFieldData, that returns ref to object with value, errors and meta, or undefined if field isn't initialized yet, so that I can show default field state.

[logaretm]

I think you can reverse the relationship between RadioInput and RadioGroup. Since RadioInput cannot be used without a corresponding RadioGroup then useField should be called in RadioGroup. The RadioInput components would only just change their group parent value using either custom injections, actually vee-validate gives you a context key you can use to do that.

I have something working along those lines, maybe it will work for you in that case.

// RadioGroup setup
import { useField } from 'vee-validate';
// No need to provide `type=radio` since this is not an individual radio item
// now radio group have access to errors and can display them.
const field = useField('name', null)

// RadioInput Setup
import { inject, computed } from 'vue';\
// This is not documented yet
import { FieldContextKey } from 'vee-validate';

// if the field is null then no group was created
const field = inject(FieldContextKey, null);

// if the current item is checked
const isChecked = computed(() => field?.value.value === props.value);

// whenever the radio is clicked
field.handleChange(val);