How to validate q-radio for required.

gs86

Hello

I have a q-radio component that is working fine but i am having a very hard time trying to validate that atleast one of the option must be selected for form validation.

if someone can help on this i will be highly grateful. Thanks in advance below is my code.

//my component

<template>
  <div class="q-gutter-sm">
    <q-radio
      :value="value"
      :rules="arrRules"
      v-on:input="emit"
      v-for="objOption in arrRadioOptions"
      :key="objOption.id"
      :val="objOption.id"
      :label="objOption.name"
    />
  </div>
</template>

<script>
export default {
  name: "base-radio",
  data() {
    return {};
  },
  props: {
    arrRadioOptions: {
      type: Array,
      required: true
    },
    value: { required: true },
    is_required: { type: Boolean, default: false },
    tooltip: {
      type: String
    }
  },
  computed: {
    arrRules() {
      return this.is_required ? this.$utils.requiredRule : [];
    }
  },
  methods: {
    emit(value) {
      this.$emit("input", value);
    }
  }
};
</script>

<style lang="scss" scoped></style>

my call for component in parent

  <base-radio
                          is_required
                          v-model="objModel.title"
                          :arrRadioOptions="arrTitle"
                        ></base-radio>

gs86

Please ignore above i found out i have to use QField for this as input and select are already wrapping them.

gs86

Here is how i did it maybe it helps someone in future

component

<template>
  <div class="q-gutter-sm">
    <q-field
      ref="radioGroup"
      :value="radioGroup"
      hide-bottom-space
      borderless
      :rules="rules"
    >
      <q-radio
        v-model="radioGroup"
        v-on:input="emit"
        v-for="radioOption in radioOptions"
        :key="radioOption.id"
        :val="radioOption.id"
        :label="radioOption.name"
      />
    </q-field>
  </div>
</template>

<script>
export default {
  name: "base-radio",
  created() {
    this.radioGroup = this.value;
  },
  data() {
    return { radioGroup: "" };
  },
  props: {
    radioOptions: {
      type: Array,
      required: true
    },
    value: { required: true },
    isRequired: { type: Boolean, default: false },
    tooltip: {
      type: String
    }
  },
  computed: {
    rules() {
      return this.isRequired ? this.$utils.requiredRule : [];
    }
  },
  methods: {
    emit(value) {
      console.log("emitting", value);
      this.$emit("input", value);
    }
  }
};
</script>

<style lang="scss" scoped></style>

call to component

  <base-radio
                          isRequired
                          v-model="objModel.title"
                          :radioOptions="arrTitle"
                        ></base-radio>