How to close dialog with a qform without validating the form

  • 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 ?

  • @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.

  • @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 ?

          <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()" />
                label="Enter Email"
                :rules="[ val => val && val.length > 0 || 'Please enter your email address']"
                label="Enter Password"
                :type="isPwd ? 'password' : 'text'"
                :rules="[ val => val && val.length > 0 || 'Please enter your password']"
                <template v-slot:append>
                    :name="isPwd ? 'visibility_off' : 'visibility'"
                    @click="isPwd = !isPwd"
            <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"/>
    <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:, password: this.password})
          if (readLoginError(this.$store)) {
            // fail
              color: 'negative',
              position: 'top',
              message: 'Incorrect email or password',
              icon: 'report_problem'
        onClose () {
          (this.$refs.dialog as Element & { hide: () => boolean }).hide()
          this.isPwd = true
 = '';
          this.password = '';

  • @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.

  • @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.

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

Log in to reply