CODEWITHSUNDEEP
vuejs2vue-componentquasar-framework
Rajib Deb
Rajib Deb

Reputation: 51

Quasar custom input component field validation

I am trying to create Quasar custom select component with autocomplete. Everything works fine except the validation error, the validation error is showing only when I click the input box and leave without adding any value. But, the form is submitting even there are any errors.

Component code

    <q-select
        ref="members"
        v-model="sModel"
        use-input
        :options="filteredOptions"
        :multiple="multiple"
        :use-chips="useChips"
        :label="label"
        :option-label="optionLabel"
        :option-value="optionValue"
        @filter="filterFn"
        @input="handleInput"
        emit-value
        map-options
        hint
        dense
        outlined
        lazy-rules
        :rules="rules"
        >
        <template v-slot:prepend>
            <q-icon :name="icon" />
        </template>
    </q-select>
</template>

<script>
export default {
  props: {
    value: Array, 
    rules: Array, 
    icon: String,
    label: String,
    optionValue: String,
    optionLabel: String,
    options: Array,
    multiple: Boolean,
    useChips: Boolean
  },
  data () {
    return {
      filteredOptions: this.options,
      sModel: this.value,
      validationErrors:{

      }
    }
  },
  methods: {
    filterFn (val, update) {
      if (val === '') {
        update(() => {
          this.filteredOptions = this.options
          // with Quasar v1.7.4+
          // here you have access to "ref" which
          // is the Vue reference of the QSelect
        })
        return
      }

      update(() => {
        const needle = val.toLowerCase()
        const optionLabel = this.optionLabel
        this.filteredOptions = this.options.filter(function(v){
          // optionLabel
            return v[optionLabel].toLowerCase().indexOf(needle) > -1
        })
      })
    },
    handleInput (e) {
      this.$emit('input', this.sModel)
    }
  },
}
</script>

In the parent component, this is how I am implementing it,

<AdvancedSelect
 ref="members"
 v-model="members"
 :options="extAuditEmployees"
 icon="people_outline"
 multiple
 use-chips
 label="Team Members *"
 option-label="formatted_name"
 option-value="id"
 :rules="[ val => val && val.length && !validationErrors.members > 0 ||  validationErrors.members ? validationErrors.members :  'Please enter Team members' ]">
</AdvancedSelect>

Upvotes: 0

Views: 6755

Answers (2)

balan kugan
balan kugan

Reputation: 109

add ref to the form and try to validate the form. you can give give props "greedy" to the form.

Upvotes: 0

Jeanpier Mendoza
Jeanpier Mendoza

Reputation: 21

Try adding this method on select component methods:

validate(...args) {
    return this.$refs.members.validate(...args);
}

It worked for me, apparently it sends the validation of the input to the parent

Source consulted: https://github.com/quasarframework/quasar/issues/7305

Upvotes: 1

Related Questions