How to validate q-radio for required.



  • 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>
    


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



  • 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>
    

Log in to reply