No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to validate q-radio for required.

    Help
    1
    3
    1750
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      gs86 last edited by

      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>
      
      1 Reply Last reply Reply Quote 0
      • G
        gs86 last edited by

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

        1 Reply Last reply Reply Quote 0
        • G
          gs86 last edited by

          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>
          
          1 Reply Last reply Reply Quote 1
          • First post
            Last post