Dynamic error message



  • Hello,
    I checked this documentation: http://quasar-framework.org/components/field.html
    Error labels seem to be static strings, but I’d like to change the error message depending on the validation (“Password too short”, “Password too big”, etc.).
    Thanks!



  • You can set prop error-label with your custom computed properties depending on the validation
    <q-field error :error-label="mycomputederrormessage" />



  • Thanks for your reply, but how can I actually set a different message depending on the condition not fulfilled?
    I have:

    validations: {
        form: {
          name: {
            required,
            minLength: minLength(4),
            maxLength: maxLength(24)
          }
        }
      },
    

    But I don’t know how to display a different error message for each condition… 😞



  • <q-field :error="$v.form.name.$error" :error-label="errorFieldName">
      <q-input v-model="name" />
    </q-field>
    
    computed: {
      errorFieldName () {
        if (this.$v.form.name.required) return 'Field name is required'
        if (this.$v.form.name.minLength) return `Field name must have at least {{this.$v.form.name.$params.minLength.min}} letters.`
        if (this.$v.form.name.maxLength) return `Field name can't have more than {{this.$v.form.name.$params.maxLength.max}} letters.`
      }
    }
    


  • It is almost perfect: I just have “{{this.$v.form.name.$params.maxLength.max}}” displayed like this: it doesn’t show the real value, whereas basic concatenation (‘text’ + this.$v.form.name.$params.maxLength.max + ’ text’) works well.
    Any clue on that?



  • I made a mistake while writing my “template strings”

    errorFieldName () {
      if (this.$v.form.name.required) return 'Field name is required'
      if (this.$v.form.name.minLength) return `Field name must have at least ${this.$v.form.name.$params.minLength.min} letters.`
      if (this.$v.form.name.maxLength) return `Field name cant have more than ${this.$v.form.name.$params.maxLength.max} letters.`
    }
    


  • @chbarr Thanks again 😉