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 ?

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


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