fix: remove address lazy rule

src/components/02_personnel-management/FormAddress.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, watch, reactive } from 'vue';
+import { onMounted, watch, reactive, ref } from 'vue';
 import useAddressStore, {
   District,
   Province,
@@ -28,6 +28,14 @@ const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string | null | undefined>('zipCode');
 const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
 
+const refProvinceTh = ref<null | { resetValidation: () => null }>(null);
+const refDistTh = ref<null | { resetValidation: () => null }>(null);
+const refSubDistTh = ref<null | { resetValidation: () => null }>(null);
+
+const refProvinceEn = ref<null | { resetValidation: () => null }>(null);
+const refDistEn = ref<null | { resetValidation: () => null }>(null);
+const refSubDistEn = ref<null | { resetValidation: () => null }>(null);
+
 const addrOptions = reactive<{
   provinceOps: Province[];
   districtOps: District[];
@@ -126,18 +134,14 @@ watch(districtId, fetchSubDistrict);
           :label="$t('address')"
           class="col-12"
           v-model="address"
-          lazy-rules
           :rules="
-            disabledRule
+            false
               ? []
-              : [
+              : [(val: string) => !!val || $t('formDialogInputAddressValidate')]
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputAddressValidate'),
-                ]
           "
         />
         <q-select
+          ref="refProvinceTh"
           :id="`${id !== undefined ? `select-province-${id}` : 'select-province'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -152,7 +156,6 @@ watch(districtId, fetchSubDistrict);
           :label="$t('province')"
           class="col-3"
           :options="addrOptions.provinceOps"
-          lazy-rules
           :rules="
             disabledRule
               ? []
@@ -166,6 +169,7 @@ watch(districtId, fetchSubDistrict);
         />
 
         <q-select
+          ref="refDistTh"
           :id="`${id !== undefined ? `select-district-${id}` : 'select-district'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -180,7 +184,6 @@ watch(districtId, fetchSubDistrict);
           :label="$t('district')"
           class="col-3"
           :options="addrOptions.districtOps"
-          lazy-rules
           :rules="
             disabledRule
               ? []
@@ -193,6 +196,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="subDistrictId = zipCode = null"
         />
         <q-select
+          ref="refSubDistTh"
           :id="`${id !== undefined ? `select-sub-district-${id}` : 'select-sub-district'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -207,7 +211,6 @@ watch(districtId, fetchSubDistrict);
           :label="$t('subDistrict')"
           class="col-3"
           :options="addrOptions.subDistrictOps"
-          lazy-rules
           :rules="
             disabledRule
               ? []
@@ -242,7 +245,6 @@ watch(districtId, fetchSubDistrict);
           :label="$t('address')"
           class="col-12"
           v-model="addressEN"
-          lazy-rules
           :rules="
             disabledRule
               ? []
@@ -254,6 +256,7 @@ watch(districtId, fetchSubDistrict);
           "
         />
         <q-select
+          ref="refProvinceEn"
           :id="`${id !== undefined ? `select-province-en-${id}` : 'select-province-en'}`"
           hide-bottom-space
           :dense="dense"
@@ -268,7 +271,6 @@ watch(districtId, fetchSubDistrict);
           :label="$t('province')"
           class="col-3"
           :options="addrOptions.provinceOps"
-          lazy-rules
           :rules="
             disabledRule
               ? []
@@ -281,6 +283,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="districtId = subDistrictId = zipCode = null"
         />
         <q-select
+          ref="refDistEn"
           :id="`${id !== undefined ? `select-district-en-${id}` : 'select-district-en'}`"
           hide-bottom-space
           :dense="dense"
@@ -295,7 +298,6 @@ watch(districtId, fetchSubDistrict);
           :label="$t('district')"
           class="col-3"
           :options="addrOptions.districtOps"
-          lazy-rules
           :rules="
             disabledRule
               ? []
@@ -308,6 +310,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="subDistrictId = zipCode = null"
         />
         <q-select
+          ref="refSubDistEn"
           :id="`${id !== undefined ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
           hide-bottom-space
           :dense="dense"
@@ -322,7 +325,6 @@ watch(districtId, fetchSubDistrict);
           :label="$t('subDistrict')"
           class="col-3"
           :options="addrOptions.subDistrictOps"
-          lazy-rules
           :rules="
             disabledRule
               ? []