q-form reset

[mr-Sepi0l]

Hello there,

I've begin quasar recently for some of my project and I face an issue I don't find any answers or anything in the doc.

I'm having some form in modal. THe form is based on q-form with q-inputs inside.
Everything got submitted via the form for the validation.

So here is my form component line :
<q-form @submit="save" @reset="form.reset()">

The save method trigger an ajax call which add a user and emit en event to the parent component to add the user to the list.

Two questions:

• 1. Is there any other way to close the modal than in catching the event after ajax call and set the v-model of the modal to false ?
• 2. My form keeps resetting before the modal is closed and then show the validation error a fraction of second before the modal close and that annoys me much ^^

For context, here is my code.

Form template:

<q-form @submit="save" @reset="form.reset()">
                <q-card-section class="text-h4">
                    Inviter des <span class="text-primary">collaborateurs</span>
                </q-card-section>
                <q-card-section class="q-pt-md q-pb-xs q-px-sm">
                    <div>
                        <q-select
                            filled
                            v-model="existingUser"
                            use-input
                            option-value="value"
                            option-label="label"
                            hide-selected
                            hide-bottom-space
                            :rules="emailAutoCompleteRules"
                            fill-input
                            new-value-mode="add-unique"
                            hide-dropdown-icon
                            :loading="loading"
                            input-debounce="500"
                            @update:model-value="onSelectUser"
                            :options="options"
                            @filter="filterFn"
                            label="Email"/>
                    </div>
                    <div class="flex q-gutter-sm items-baseline">
                        <q-input filled
                                 class="col-grow"
                                 label="Prénom"
                                 :rules="[val => !!val || 'Vous devez renseigner un prénom']"
                                 hide-bottom-space
                                 v-model="form.firstname"/>
                        <q-input filled
                                 class="col-grow"
                                 label="Nom"
                                 :rules="[val => !!val || 'Vous devez renseigner un nom']"
                                 hide-bottom-space
                                 v-model="form.lastname"/>
                    </div>
                    <div>
                        <q-input filled
                                 class="col-grow"
                                 label="Nom du poste"
                                 hide-bottom-space
                                 v-model="form.jobName"/>
                    </div>
                </q-card-section>

                <q-card-actions class="full-width" align="between">
                    <q-btn label="Annuler"
                           filled
                           color="grey-3"
                           text-color="grey-8"
                           class="col-grow"
                           unelevated
                           v-close-popup="form.reset()"
                           :no-caps="true"/>

                    <q-btn label="Inviter" color="primary"
                           :loading="form.isLoading"
                           :no-caps="true"
                           type="submit"
                           unelevated
                           class="col-grow"/>
                </q-card-actions>
            </q-form>

And here is my save function

 const save = () => {               
                companyStore.inviteCollaborator(form, companyId.value)
                    .then(user => {
                        emit('added', user);
                        quasar.notify({
                            message: `${user.firstname} ${user.lastname} a été ajouté avec succès`,
                            icon: 'check',
                            color: 'positive',
                            multiLine: true
                        });
                        // form.reset();
                        existingUser.value = null;
                    }).catch(error => onError(error, form));
            };

Am I missing something ?

[pdanpdan]

Please make a codepen

[mr-Sepi0l]

I'll do it, i'm a bit in a rush rn ^^