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