How to close dialog with a qform without validating the form

[lesourcil]

Hi,

I have a dialog with a qform with inputs with rules on them and i want to be able to close the dialog by pressing cancel button without entering any values in the inputs. How can i do it because right now, it won’t let me cancel because my field are empty and i have a rule that says those fields are required.

Any ideas ?

[metalsadman]

@lesourcil three ways, using v-close-overlay , use a ref on your dialog and call hide(), or using v-model on your dialog and set it to false,but imo it could be your logic that blocking the closing, so check on that as well.

[lesourcil]

@metalsadman

Seems like its not working. Im triggering the dialog from another component. I don’t know if it changes something. When I click on the cancel button, it’s being block and it bring me back to my empty field. I’ve copied the whole component code here. I must be doing something wrong. Any way i can cancel the validation from happening ?

<template>
  <q-dialog
    v-model="showDialog"
    persistent
    ref="dialog"
  >
    <q-form
      class="q-gutter-md"
    >
      <q-card style="width: 500px">
        <q-toolbar class="bg-blue">
          <q-icon name="login" style="font-size: 32px"/>

          <q-toolbar-title><span class="text-weight-bold">Sign In</q-toolbar-title>

          <q-btn flat round dense icon="close" @click="onClose()" />

        </q-toolbar>
        <q-card-section>
          <q-input 
            dense
            v-model="email"
            autofocus
            label="Enter Email"
            @keyup.enter="onSubmit"
            lazy-rules
            :rules="[ val => val && val.length > 0 || 'Please enter your email address']"
          />
          <q-input 
            dense
            v-model="password"
            label="Enter Password"
            :type="isPwd ? 'password' : 'text'"
            @keyup.enter="onSubmit"
            lazy-rules
            :rules="[ val => val && val.length > 0 || 'Please enter your password']"
          >
            <template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>
        </q-card-section>
        <q-card-actions align="right" class="text-primary">
          <q-btn flat label="Cancel" @click="onClose()"/>
          <q-btn flat label="Sign In" @click="onSubmit()" color="primary"/>
        </q-card-actions>

      </q-card>
    </q-form>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { readLoginError } from '../store/main/getters';
import { dispatchLogIn } from '../store/main/actions';

export default defineComponent({
  name: 'Login',
  props: {
    showDialog: {
      default: false,
      type: Boolean,
    },
  },
  data () {
    return {
      email: '',
      password: '',
      isPwd: true,
    }
  },
  methods: {
    async onSubmit () {
      await dispatchLogIn(this.$store, {username: this.email, password: this.password})
      if (readLoginError(this.$store)) {
        // fail
        this.$q.notify({
          color: 'negative',
          position: 'top',
          message: 'Incorrect email or password',
          icon: 'report_problem'
        })
      }else{
        this.onClose()
      }
    },
    onClose () {
      (this.$refs.dialog as Element & { hide: () => boolean }).hide()
      this.isPwd = true
      this.email = '';
      this.password = '';
      this.$emit('closeSignInDialog')
    }
  },
});
</script>

[metalsadman]

@lesourcil pretty certain there’s some logic in your code blocking it.
seeing this is ts not sure might be this line here (this.$refs.dialog as Element & { hide: () => boolean }).hide() or somewhere in your parent, just put some console.logs in your handler see if it’s being called.

[lesourcil]

@metalsadman

Hi again,

i removed the line (this.$refs.dialog as Element & { hide: () => boolean }).hide() and added a console.log instead and its never reaching the function. The qform validation seems to be blocking me. If i remove the <q-form> without changing anything else, it works as expected.

[lesourcil]

Ok, i figured it out. If I enclose my <q-form> in a <div> it works. Now im really really curious to know why ?