How to validate multiple inputs under the same field with Oruga Addons

[learntheropes]

Reading this issue I was able to use vee-validate with Oruga, as follows:

<script setup>
const phone = ref({
  prefix: null,
  number: null
});
const phoneValidationSchema = {
  loginPrefix: {
    required: true
  },
  loginNumber: {
    required: true,
  }
};
</script>

<template>
  <NuxtLayout>

    <div class="">
      <VForm
        v-if="showPhone"
        name="phone"
        :validation-schema="phoneValidationSchema"
        @submit="sendWhatsapp"
      >        
        <VField
          name="loginPrefix"
          label="Prefix"
          v-slot="{ handleChange, handleBlur, value, errors }"
          v-model="phone.prefix"
        >
          <OField
            label="Prefix"
            :variant="errors[0] ? 'danger' : null"
            :message="errors[0] ? errors[0] : ''"
          >
            <OSelect
              :model-value="value"
              @update:modelValue="handleChange"
              @change="handleChange"
              @blur="handleBlur"
            >
              <option value="+1">+1</option>
              <option value="+44">+44</option>
            </OSelect>
          </OField>
        </VField>

        <VField
          name="loginNumber"
          v-slot="{ handleChange, handleBlur, value, errors }"
          v-model="phone.number"
        >
          <OField
            label="Number"
            :variant="errors[0] ? 'danger' : null"
            :message="errors[0] ? errors[0] : ''"
          >
            <OInput
              :model-value="value"
              @update:modelValue="handleChange"
              @change="handleChange"
              @blur="handleBlur"
              expanded
            />
          </OField>
        </VField>
      </VForm>
</template>

However, I can't figure out how to implement the validation if I want to have the two inputs under the same field with oruga addons like so:

<OField>
  <OSelect v-model="phone.prefix">
     <option value="+1">+1</option>
     <option value="+44">+44</option>
  </OSelect>
  <OInput type="text" v-model="phone.number"></OInput>
</OField>

Can someone point me in the right direction?

[logaretm]

In v4, you cannot have multiple different fields with different values that have the same name. Either they should share the same value or they should get different names.

Why do you need two inputs with the same name? as far as I can see you have two fields, loginPrefix and loginNumber.

[learntheropes]

I don't want the same name. That is not relevant for me. But I want just one field containing one select and one input.
This is because in Oruga, to get the select and the input "inline" as shown in this screenshot, they must be under the same field

As mentioned in oruga documentation here under the Addons section

[learntheropes]

Code from the Oruga documentation that I liked before:

    <o-field>
      <o-select placeholder="Currency">
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </o-select>
      <o-input type="number" placeholder="0,00"></o-input>
      <o-button variant="success">Transfer</o-button>
    </o-field>

One field, containing multiple inputs, or one input and another element, a select in this case.

[learntheropes]

Mostly the same happens also with Bulma, where you have:

<div class="field has-addons">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <a class="button">
      Transfer
    </a>
  </p>
</div>

https://bulma.io/documentation/form/general/

[learntheropes]

Any idea how to solve this @logaretm ?
I have a form with many of these type of fields that I'm migrating from Nuxt 2 to Nuxt 3 and at the moment the 2 libraries seam to be not compatibles.