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>