vuejs3yupvue-composition-apivee-validate

Vue 3 + Vee-validate 4 - handleSubmit does not getting triggered


I am new to Vue and learning Vue using composition API. Now I am stuck on the validation and form submitting process. I am using VeeValidate for validation and form submission. I am handleSubmit function for form submission, but this is not getting triggered at all.

I have tried creating the form as per the documentation but how I messed up. Any help would be appreciable

<template>
    <div class="modal-dialog modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add Layout </h4>
                <a class="modal-close" @click="isModalOpen = !isModalOpen"><i class="fa fa-times"></i></a>
            </div>
            <form autocomplete="off" @submit="onSubmit">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 col-lg-12">
                            <div class="mb-3">
                                <label class="form-label">Layout Name:<span class="text-danger">*</span></label>
                                <div class="form-group">
                                    <input type="text" name="layoutName" v-model="layoutName" class="form-control"
                                        maxlength="50" placeholder="Enter Layout Name"
                                        :class="{ 'is-invalid': layoutNameError }" />
                                    <div class="invalid-feedback">{{ layoutNameError }}</div>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                            <div class="mb-3">
                                <label class="form-label">Module:<span class="text-danger">*</span></label>
                                <div class="form-group">
                                    <Dropdown name="moduleId" v-model="moduleId" :options="moduleList"
                                        optionLabel="text" placeholder="Select Module" class="widthAll"
                                        @change="onChangeModule($event.value)" :editable="true" :filter="true"
                                        :showClear="true" />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                            <div class="mb-3">
                                <label class="form-label">Sub Module:<span class="text-danger">*</span></label>
                                <div class="form-group">
                                    <Dropdown name="subModuleId" v-model="subModuleId" :options="subModuleList"
                                        optionLabel="text" placeholder="Select Sub Module" class="widthAll"
                                        :editable="true" :filter="true" :showClear="true" />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                            <div class="mb-3">
                                <label class="form-label">Device Type:<span class="text-danger">*</span></label>
                                <div class="form-group">
                                    <Dropdown name="deviceTypeId" v-model="deviceTypeId" :options="deviceTypeList"
                                        optionLabel="text" placeholder="Select Device Type" class="widthAll"
                                        :editable="true" :filter="true" />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                            <div class="mb-3">
                                <label class="form-label">Layout Type:<span class="text-danger">*</span></label>
                                <div class="form-group">
                                    <Dropdown name="layoutTypeId" v-model="layoutTypeId" :options="layoutTypeList"
                                        optionLabel="text" placeholder="Select Layout Type" class="widthAll"
                                        :editable="true" :filter="true" />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-lg-12">
                            <div class="mb-3">
                                <label class="form-label">Description:</label>
                                <div class="form-group">
                                    <input type="text" name="description" v-model="description" class="form-control"
                                        maxlength="50" placeholder="Enter description"
                                        :class="{ 'is-invalid': descriptionError }" />
                                    <div class="invalid-feedback">{{ descriptionError }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="col-12 mt-3">
                        <button type="submit" class="btn btn-success me-2">Submit</button>
                        <a href="javascript:;" class="btn btn-danger form-btns" @click="isModalOpen = false">Cancel</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>
<script>
import { ref, onMounted } from 'vue';
import * as Yup from 'yup';
import Dropdown from 'primevue/dropdown';
import InputMask from '@/views/shared/inputmask/inputmasktemplate.vue';
//Services
import CommonService from '@/service/crmservice/commonService';
import ManageLayoutService from '@/service/crmservice/manageLayoutService';
import { useForm, useField } from 'vee-validate';

export default {
    name: 'ManageLayoutAddView',
    components: {
        InputMask,
        Dropdown
    },
    props: {
        isModalOpen: Yup.boolean
    },
    setup(props) {
        console.log(props)
        const commonService = ref(new CommonService());
        const manageLayoutService = ref(new ManageLayoutService());
        const layoutTypeKey = ref('layoutType');
        const deviceTypeKey = ref('deviceType');
        const moduleList = ref([]);
        const subModuleList = ref([]);
        const layoutTypeList = ref([]);
        const deviceTypeList = ref([]);
        const companyId = ref(null);
        const userId = ref(null);
        const layoutObj = ref({
            layoutName: null,
            moduleId: null,
            subModuleId: null,
            deviceTypeId: null,
            layoutTypeId: null,
            description: null,
        });
        const schema = Yup.object().shape({
            layoutName: Yup.string().required('Layout Name is required'),
            moduleId: Yup.string().required('Module is required'),
            subModuleId: Yup.string().required('Sub Module is required'),
            deviceTypeId: Yup.string().required('Device Type is required'),
            layoutTypeId: Yup.string().required('Layout Type is required'),
            description: Yup.string()
        });
        const { handleSubmit, errors, meta } = useForm({
            validationSchema: schema,

        });
        const { value: layoutName, errorMessage: layoutNameError } = useField("layoutName");
        const { value: moduleId, errorMessage: moduleIdError } = useField("moduleId");
        const { value: subModuleId, errorMessage: subModuleIdError } = useField("subModuleId");
        const { value: deviceTypeId, errorMessage: deviceTypeIdError } = useField("deviceTypeId");
        const { value: layoutTypeId, errorMessage: layoutTypeIdError } = useField("layoutTypeId");
        const { value: description, errorMessage: descriptionError } = useField("description");
        const getMasterItemList = (masterKey) => {
            // $loader.show();
            commonService.value.getMasterItemList(masterKey, "asd", userId.value, companyId.value)
                .then(response => {
                    masterKey == "layoutType" ? layoutTypeList.value = response.data : deviceTypeList.value = response.data;
                    // $loader.hide();
                });
        }
        const getModuleList = () => {
            // $loader.show();
            commonService.value.getModuleList(userId.value, companyId.value)
                .then(response => {
                    moduleList.value = response.data;
                    // $loader.hide();
                })
        }
        const getSubModuleList = (moduleId) => {
            // $loader.show();
            commonService.value.getSubModuleList(moduleId, userId.value, companyId.value)
                .then(response => {
                    subModuleList.value = response.data;
                    // $loader.hide();
                })
        }
        const onChangeModule = (event) => {
            getSubModuleList(event.value);
        }
        const getUserInfo = () => {
            userId.value = localStorage.getItem("userId");
            companyId.value = localStorage.getItem("companyId");
        }
        const onSubmit = handleSubmit((values) => {
            debugger;
            console.log(JSON.stringify(values, null, 2));
        });
        onMounted(() => {
            getUserInfo();
            getModuleList();
            getMasterItemList(layoutTypeKey.value);
            getMasterItemList(deviceTypeKey.value);
        })
        return {
            layoutObj,
            deviceTypeList,
            layoutTypeList,
            moduleList,
            subModuleList,
            errors,
            meta,
            layoutName, layoutNameError,
            moduleId, moduleIdError,
            subModuleId, subModuleIdError,
            deviceTypeId, deviceTypeIdError,
            layoutTypeId, layoutTypeIdError,
            description, descriptionError,
            getMasterItemList,
            getModuleList,
            onChangeModule,
            onSubmit
        }
    }
}
</script>

Solution

  • The actual problem with PrimeVue dropdown control. It was not showing the error message. When I checked the whole form then I clearly found the issue which was an invalid value. As value was in object and declare it a string in yup object.