Working with the error property of q-field for validation (Solved)

[mboeni]

Hi there

I would like to act on the state of the ‘error’ property of q-input like this:

    saveAccountDataButtonPressed: function () {
      // Do the saving - The validation is done on the field itself
      if (this.$refs.usernameField.error === false) {
        // this.$q.localStorage.set('username', this.username)
        console.log('No validation errors.')
      } else {
        console.log('There are validation errors.')
        console.log(this.$refs.usernameField.error)
      }

and here is the q-input:

  <q-input
    ref='usernameField'
    outlined
    dense
    dark
    color="accent"
    bg-color="blue-grey-6"
    v-model="username"
    :rules="[ val => username.length >= 3 || 'Please use a minimum of 3 characters.' ]"
  />

My issue now is that ‘error’ is always null instead of the expected boolean value.

Any ideas why this is?

Cheers,
Michael

[metalsadman]

@mboeni use this.$refs.usernameField.hasError

[mboeni]

@metalsadman Thanks, I wasn’t aware that there is a ‘hasError’ too.