Dynamic error message

djcaesar9114

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!

chbarr

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

djcaesar9114

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…

chbarr

<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.`
  }
}

djcaesar9114

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?

chbarr

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.`
}

djcaesar9114

@chbarr Thanks again

geoidesic

This doesn’t work for me. I just get the output: “errorFieldName” as the error message.

geoidesic

ok forgot the colon - :error-label. So it works. However I think your logic is wrong, should be NOT, as the value will be false when there is an error. Also The concatenation doesn’t work the way you have it. e.g.:

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.'
}

No More Posting New Topics!

Dynamic error message