fix:validate

src/modules/01_exam/components/Form/Address.vue

@@ -8,207 +8,202 @@
     :editOnly="false"
     :editData="false"
   />
-  <q-form ref="myform">
-    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-      <div class="col-xs-12">
-        <q-input
-          :class="getClass(isStatusRegister)"
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          type="textarea"
-          autogrow
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          v-model="defaultAddress.address"
-          :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
-          :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-select
-          :class="getClass(isStatusRegister)"
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          v-model="defaultAddress.provinceId"
-          emit-value
-          map-options
-          option-label="name"
-          :options="provinceOptions"
-          option-value="id"
-          :label="`${'จังหวัด'}`"
-          @update:model-value="(value) => selectProvince(value, '1')"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-select
-          :class="getClass(isStatusRegister)"
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          v-model="defaultAddress.districtId"
-          emit-value
-          map-options
-          option-label="name"
-          :options="districtOptions"
-          option-value="id"
-          :label="`${'เขต / อำเภอ'}`"
-          @update:model-value="(value) => selectDistrict(value, '1')"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-select
-          :class="getClass(isStatusRegister)"
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          :rules="[(val) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          v-model="defaultAddress.subdistrictId"
-          emit-value
-          map-options
-          option-label="name"
-          :options="subdistrictOptions"
-          option-value="id"
-          :label="`${'แขวง / ตำบล'}`"
-          @update:model-value="(value) => selectSubDistrict(value, '1')"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
-          :class="getClass(isStatusRegister)"
-          dense
-          lazy-rules
-          :readonly="!(status == 'rejectRegister')"
-          :borderless="!isStatusRegister"
-          :outlined="isStatusRegister"
-          v-model="defaultAddress.code"
-          bottom-slots
-          :label="`${'รหัสไปรษณีย์'}`"
-        />
-      </div>
-      <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm row">
-        <div class="text-bold" v-if="$q.screen.gt.xs">
-          ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
-        </div>
-        <div class="text-bold col-12 q-pt-sm" v-else>
-          ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
-        </div>
-        <q-radio
-          v-model="defaultAddress.same"
-          checked-icon="task_alt"
-          unchecked-icon="panorama_fish_eye"
-          val="1"
-          label="ใช่"
-          dense
-          :disable="!isStatusRegister"
-        />
-        <q-radio
-          v-model="defaultAddress.same"
-          checked-icon="task_alt"
-          unchecked-icon="panorama_fish_eye"
-          val="0"
-          label="ไม่"
-          dense
-          :disable="!isStatusRegister"
-        />
-      </div>
 
-      <div class="col-xs-12" v-if="defaultAddress.same == '0'">
-        <q-input
-          :class="getClass(isStatusRegister)"
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          type="textarea"
-          autogrow
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          v-model="defaultAddress.addressC"
-          :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
-          :label="`${'ที่อยู่ปัจจุบัน'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
-        <q-select
-          :class="getClass(isStatusRegister)"
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          v-model="defaultAddress.provinceIdC"
-          emit-value
-          map-options
-          option-label="name"
-          :options="provinceOptions"
-          option-value="id"
-          :label="`${'จังหวัด'}`"
-          @update:model-value="(value) => selectProvince(value, '2')"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
-        <q-select
-          :class="getClass(isStatusRegister)"
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          v-model="defaultAddress.districtIdC"
-          emit-value
-          map-options
-          option-label="name"
-          :options="districtCOptions"
-          option-value="id"
-          :label="`${'เขต / อำเภอ'}`"
-          @update:model-value="(value) => selectDistrict(value, '2')"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
-        <q-select
-          :class="getClass(isStatusRegister)"
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          :rules="[(val) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          v-model="defaultAddress.subdistrictIdC"
-          emit-value
-          map-options
-          option-label="name"
-          :options="subdistrictCOptions"
-          option-value="id"
-          :label="`${'แขวง / ตำบล'}`"
-          @update:model-value="(value) => selectSubDistrict(value, '2')"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
-        <q-input
-          :class="getClass(isStatusRegister)"
-          dense
-          lazy-rules
-          bottom-slots
-          :readonly="!(status == 'rejectRegister')"
-          :borderless="!isStatusRegister"
-          :outlined="isStatusRegister"
-          v-model="defaultAddress.codeC"
-          :label="`${'รหัสไปรษณีย์'}`"
-        />
-      </div>
+  <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+    <div class="col-xs-12">
+      <q-input
+        :class="getClass(isStatusRegister)"
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        type="textarea"
+        autogrow
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        v-model="defaultAddress.address"
+        :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
+        :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
+      />
     </div>
-  </q-form>
+    <div class="col-xs-12 col-sm-3 col-md-3">
+      <q-select
+        :class="getClass(isStatusRegister)"
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        v-model="defaultAddress.provinceId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="provinceOptions"
+        option-value="id"
+        :label="`${'จังหวัด'}`"
+        @update:model-value="(value) => selectProvince(value, '1')"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3">
+      <q-select
+        :class="getClass(isStatusRegister)"
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        v-model="defaultAddress.districtId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="districtOptions"
+        option-value="id"
+        :label="`${'เขต / อำเภอ'}`"
+        @update:model-value="(value) => selectDistrict(value, '1')"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3">
+      <q-select
+        :class="getClass(isStatusRegister)"
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        :rules="[(val) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        v-model="defaultAddress.subdistrictId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="subdistrictOptions"
+        option-value="id"
+        :label="`${'แขวง / ตำบล'}`"
+        @update:model-value="(value) => selectSubDistrict(value, '1')"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3">
+      <q-input
+        :class="getClass(isStatusRegister)"
+        dense
+        lazy-rules
+        :readonly="!(status == 'rejectRegister')"
+        :borderless="!isStatusRegister"
+        :outlined="isStatusRegister"
+        v-model="defaultAddress.code"
+        bottom-slots
+        :label="`${'รหัสไปรษณีย์'}`"
+      />
+    </div>
+    <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm row">
+      <div class="text-bold" v-if="$q.screen.gt.xs">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</div>
+      <div class="text-bold col-12 q-pt-sm" v-else>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</div>
+      <q-radio
+        v-model="defaultAddress.same"
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        val="1"
+        label="ใช่"
+        dense
+        :disable="!isStatusRegister"
+      />
+      <q-radio
+        v-model="defaultAddress.same"
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        val="0"
+        label="ไม่"
+        dense
+        :disable="!isStatusRegister"
+      />
+    </div>
+
+    <div class="col-xs-12" v-if="defaultAddress.same == '0'">
+      <q-input
+        :class="getClass(isStatusRegister)"
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        type="textarea"
+        autogrow
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        v-model="defaultAddress.addressC"
+        :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
+        :label="`${'ที่อยู่ปัจจุบัน'}`"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
+      <q-select
+        :class="getClass(isStatusRegister)"
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        v-model="defaultAddress.provinceIdC"
+        emit-value
+        map-options
+        option-label="name"
+        :options="provinceOptions"
+        option-value="id"
+        :label="`${'จังหวัด'}`"
+        @update:model-value="(value) => selectProvince(value, '2')"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
+      <q-select
+        :class="getClass(isStatusRegister)"
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        v-model="defaultAddress.districtIdC"
+        emit-value
+        map-options
+        option-label="name"
+        :options="districtCOptions"
+        option-value="id"
+        :label="`${'เขต / อำเภอ'}`"
+        @update:model-value="(value) => selectDistrict(value, '2')"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
+      <q-select
+        :class="getClass(isStatusRegister)"
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        :rules="[(val) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        v-model="defaultAddress.subdistrictIdC"
+        emit-value
+        map-options
+        option-label="name"
+        :options="subdistrictCOptions"
+        option-value="id"
+        :label="`${'แขวง / ตำบล'}`"
+        @update:model-value="(value) => selectSubDistrict(value, '2')"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
+      <q-input
+        :class="getClass(isStatusRegister)"
+        dense
+        lazy-rules
+        bottom-slots
+        :readonly="!(status == 'rejectRegister')"
+        :borderless="!isStatusRegister"
+        :outlined="isStatusRegister"
+        v-model="defaultAddress.codeC"
+        :label="`${'รหัสไปรษณีย์'}`"
+      />
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@@ -317,7 +312,7 @@ const selectProvince = async (e: string, name: string) => {
     defaultAddress.value.subdistrictIdC = ''
     defaultAddress.value.codeC = null
   }
-  myform.value.resetValidation()
+
   await fetchDistrict(e, name)
 }
 
@@ -329,7 +324,7 @@ const selectDistrict = async (e: string, name: string) => {
     defaultAddress.value.subdistrictIdC = ''
     defaultAddress.value.codeC = null
   }
-  myform.value.resetValidation()
+
   await fetchSubDistrict(e, name)
 }
 
@@ -351,6 +346,7 @@ const fetchDistrict = async (id: string, position: string) => {
     .get(config.API.listDistrict(id))
     .then((res) => {
       const data = res.data.result.districts
+
       let option: DataOption[] = []
       data.map((r: DataOption) => {
         option.push({ id: r.id.toString(), name: r.name.toString() })

src/modules/01_exam/components/Form/Career.vue

@@ -1,67 +1,66 @@
 <!-- tab ประวัติการทำงาน -->
 <template>
-  <q-form ref="myForm">
-    <Table
-      :rows="rows"
-      :columns="columns"
-      :filter="filter"
-      :visible-columns="visibleColumns"
-      v-model:inputfilter="filter"
-      v-model:inputvisible="visibleColumns"
-      v-model:editvisible="edit"
-      :add="clickAdd"
-      :edit="clickEdit"
-      :addData="false"
-      :bottom="true"
-      :editBtn="false"
-      :boss="isStatusRegister"
-      :editData="isStatusRegister"
-      name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
-      icon="mdi-briefcase"
-      :is-showfilter="false"
-    >
-      <template #columns="props">
-        <q-tr :props="props">
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="selectData(props)"
-            class="cursor-pointer"
-          >
-            <div v-if="col.name == 'startDate' || col.name == 'endDate'">
-              {{ date2Thai(col.value) }}
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width v-if="status == 'register' || status == 'rejectRegister'">
-            <q-btn
-              color="red"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-trash-can-outline"
-              @click="checkDelete(props.row)"
-            />
-          </q-td>
-        </q-tr>
-      </template>
-      <template #bottom="props">
-        <div style="width: 63.5% !important" />
-
-        <div :props="props" class="row" style="width: 33% !important; padding-left: 20px">
-          <div class="text-weight-medium text-subtitle2 q-py-sm row col-12 justify-between">
-            <div>รวมระยะเวลา :</div>
-
-            <div>{{ total }}</div>
+  <Table
+    :rows="rows"
+    :columns="columns"
+    :filter="filter"
+    :visible-columns="visibleColumns"
+    v-model:inputfilter="filter"
+    v-model:inputvisible="visibleColumns"
+    v-model:editvisible="edit"
+    :add="clickAdd"
+    :edit="clickEdit"
+    :addData="false"
+    :bottom="true"
+    :editBtn="false"
+    :boss="isStatusRegister"
+    :editData="isStatusRegister"
+    name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
+    icon="mdi-briefcase"
+    :is-showfilter="false"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.name"
+          :props="props"
+          @click="selectData(props)"
+          class="cursor-pointer"
+        >
+          <div v-if="col.name == 'startDate' || col.name == 'endDate'">
+            {{ date2Thai(col.value) }}
           </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width v-if="status == 'register' || status == 'rejectRegister'">
+          <q-btn
+            color="red"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-trash-can-outline"
+            @click="checkDelete(props.row)"
+          />
+        </q-td>
+      </q-tr>
+    </template>
+    <template #bottom="props">
+      <div style="width: 63.5% !important" />
+
+      <div :props="props" class="row" style="width: 33% !important; padding-left: 20px">
+        <div class="text-weight-medium text-subtitle2 q-py-sm row col-12 justify-between">
+          <div>รวมระยะเวลา :</div>
+
+          <div>{{ total }}</div>
         </div>
-      </template>
-    </Table>
-  </q-form>
+      </div>
+    </template>
+  </Table>
+
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
       <q-form ref="myForm">

src/modules/01_exam/components/Form/Contact.vue

@@ -8,10 +8,10 @@
     :editOnly="false"
     :editData="false"
   />
-  <q-form ref="myform">
-    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-      <div class="col-xs-12 col-sm-3 col-md-2">
-        <!-- <q-select
+
+  <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+    <div class="col-xs-12 col-sm-3 col-md-2">
+      <!-- <q-select
 					   :class="getClass(isStatusRegister)"
 					 :readonly="!isStatusRegister"
 					:borderless="!isStatusRegister"
@@ -27,89 +27,88 @@
 					option-value="id"
 					:label="`${'คำนำหน้า'}`"
 				/> -->
-        <q-select
-          :class="getClass(isStatusRegister)"
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          :rules="[(val) => !!val || `${'กรุณากรอก คำนำหน้า'}`]"
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          v-model="defaultContact.contactprefixName"
-          :label="`${'คำนำหน้า'}`"
-          :options="filteredPrefixOptions"
-          use-input
-          fill-input
-          input-debounce="0"
-          @filter="filterPrefix"
-          @input-value="setModel"
-          hide-selected
-          hide-dropdown-icon
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
-          :class="getClass(isStatusRegister)"
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          v-model="defaultContact.contactfirstname"
-          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-          :label="`${'ชื่อ'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
-          :class="getClass(isStatusRegister)"
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          v-model="defaultContact.contactlastname"
-          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-          :label="`${'นามสกุล'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-4">
-        <q-input
-          :class="getClass(isStatusRegister)"
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          v-model="defaultContact.contactrelations"
-          :rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]"
-          :label="`${'เกี่ยวข้องเป็น'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-4">
-        <q-input
-          :outlined="isStatusRegister"
-          dense
-          lazy-rules
-          :class="getClass(isStatusRegister)"
-          :readonly="!isStatusRegister"
-          :borderless="!isStatusRegister"
-          v-model="defaultContact.contacttel"
-          :label="`${'โทรศัพท์'}`"
-          :rules="[
-            (val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
-            (val) =>
-              (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
-              'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
-          ]"
-          type="tel"
-          mask="##########"
-          maxlength="10"
-          :counter="isStatusRegister ? true : false"
-        />
-      </div>
+      <q-select
+        :class="getClass(isStatusRegister)"
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        :rules="[(val) => !!val || `${'กรุณากรอก คำนำหน้า'}`]"
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        v-model="defaultContact.contactprefixName"
+        :label="`${'คำนำหน้า'}`"
+        :options="filteredPrefixOptions"
+        use-input
+        fill-input
+        input-debounce="0"
+        @filter="filterPrefix"
+        @input-value="setModel"
+        hide-selected
+        hide-dropdown-icon
+      />
     </div>
-  </q-form>
+    <div class="col-xs-12 col-sm-3 col-md-3">
+      <q-input
+        :class="getClass(isStatusRegister)"
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        v-model="defaultContact.contactfirstname"
+        :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+        :label="`${'ชื่อ'}`"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3">
+      <q-input
+        :class="getClass(isStatusRegister)"
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        v-model="defaultContact.contactlastname"
+        :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+        :label="`${'นามสกุล'}`"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-4">
+      <q-input
+        :class="getClass(isStatusRegister)"
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        v-model="defaultContact.contactrelations"
+        :rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]"
+        :label="`${'เกี่ยวข้องเป็น'}`"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-4">
+      <q-input
+        :outlined="isStatusRegister"
+        dense
+        lazy-rules
+        :class="getClass(isStatusRegister)"
+        :readonly="!isStatusRegister"
+        :borderless="!isStatusRegister"
+        v-model="defaultContact.contacttel"
+        :label="`${'โทรศัพท์'}`"
+        :rules="[
+          (val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+          (val) =>
+            (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+            'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
+        ]"
+        type="tel"
+        mask="##########"
+        maxlength="10"
+        :counter="isStatusRegister ? true : false"
+      />
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch, PropType } from 'vue'

src/modules/01_exam/components/Form/Education.vue

@@ -8,172 +8,171 @@
     :editOnly="false"
     :editData="false"
   />
-  <q-form ref="myform">
-    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-      <div class="col-12 row q-col-gutter-sm">
-        <div class="col-xs-12 col-sm-3">
-          <q-select
-            :class="getClass(isStatusRegister)"
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            :outlined="isStatusRegister"
-            dense
-            lazy-rules
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            :options="educationLevelOptions"
-            v-model="defaultEducation.educationLevelExamId"
-            :rules="[(val) => !!val || `${'กรุณาเลือก วุฒิที่ใช้สมัครสอบ'}`]"
-            :label="`${'วุฒิที่ใช้สมัครสอบ'}`"
-            @update:model-value="(value) => checkInputName()"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3" v-if="showEducationName">
-          <q-input
-            :class="getClass(isStatusRegister)"
-            :outlined="isStatusRegister"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            v-model="defaultEducation.educationName"
-            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อปริญญา'}`]"
-            :label="`${'ชื่อปริญญา'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3">
-          <q-input
-            :class="getClass(isStatusRegister)"
-            :outlined="isStatusRegister"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            v-model="defaultEducation.educationMajor"
-            :rules="[(val) => !!val || `${'กรุณากรอก สาขาวิชา/วิชาเอก'}`]"
-            :label="`${'สาขาวิชา/วิชาเอก'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3">
-          <q-input
-            :class="getClass(isStatusRegister)"
-            :outlined="isStatusRegister"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            v-model="defaultEducation.educationLocation"
-            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อสถานศึกษา'}`]"
-            :label="`${'ชื่อสถานศึกษา'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3">
-          <q-select
-            :class="getClass(isStatusRegister)"
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            :outlined="isStatusRegister"
-            dense
-            lazy-rules
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            :options="educationTypeOptions"
-            v-model="defaultEducation.educationType"
-            :rules="[(val) => !!val || `${'กรุณาเลือก ประเภทสถานศึกษา'}`]"
-            :label="`${'ประเภทสถานศึกษา'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3">
-          <datepicker
-            :readonly="!isStatusRegister"
-            v-model="defaultEducation.educationEndDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="dateCondition"
-            :disabled="!isStatusRegister"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :class="getClass(isStatusRegister)"
-                :outlined="isStatusRegister"
-                dense
-                lazy-rules
-                :readonly="!isStatusRegister"
-                :borderless="!isStatusRegister"
-                :model-value="
-                  defaultEducation.educationEndDate == null
-                    ? null
-                    : date2Thai(defaultEducation.educationEndDate)
-                "
-                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`]"
-                :label="`${'วันที่สำเร็จการศึกษา'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    :style="
-                      status == 'register' || status == 'rejectRegister'
-                        ? 'color: var(--q-primary)'
-                        : 'color: var(--q-grey)'
-                    "
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="col-xs-12 col-sm-3">
-          <q-input
-            :class="getClass(isStatusRegister)"
-            :outlined="isStatusRegister"
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            dense
-            lazy-rules
-            type="number"
-            v-model="defaultEducation.educationScores"
-            :rules="[(val) => !!val || `${'กรุณากรอก คะแนนเฉลี่ยสะสม'}`]"
-            :label="`${'คะแนนเฉลี่ยสะสม'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3">
-          <q-select
-            :class="getClass(isStatusRegister)"
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            :outlined="isStatusRegister"
-            dense
-            lazy-rules
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            :options="educationLevelHigherOptions"
-            v-model="defaultEducation.educationLevelHighId"
-            :rules="[(val) => !!val || `${'กรุณาเลือก วุฒิการศึกษาสูงสุด'}`]"
-            :label="`${'วุฒิการศึกษาสูงสุด'}`"
-          />
-        </div>
+
+  <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+    <div class="col-12 row q-col-gutter-sm">
+      <div class="col-xs-12 col-sm-3">
+        <q-select
+          :class="getClass(isStatusRegister)"
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          :outlined="isStatusRegister"
+          dense
+          lazy-rules
+          emit-value
+          map-options
+          option-label="name"
+          option-value="id"
+          :options="educationLevelOptions"
+          v-model="defaultEducation.educationLevelExamId"
+          :rules="[(val) => !!val || `${'กรุณาเลือก วุฒิที่ใช้สมัครสอบ'}`]"
+          :label="`${'วุฒิที่ใช้สมัครสอบ'}`"
+          @update:model-value="(value) => checkInputName()"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3" v-if="showEducationName">
+        <q-input
+          :class="getClass(isStatusRegister)"
+          :outlined="isStatusRegister"
+          dense
+          lazy-rules
+          autogrow
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          v-model="defaultEducation.educationName"
+          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อปริญญา'}`]"
+          :label="`${'ชื่อปริญญา'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3">
+        <q-input
+          :class="getClass(isStatusRegister)"
+          :outlined="isStatusRegister"
+          dense
+          lazy-rules
+          autogrow
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          v-model="defaultEducation.educationMajor"
+          :rules="[(val) => !!val || `${'กรุณากรอก สาขาวิชา/วิชาเอก'}`]"
+          :label="`${'สาขาวิชา/วิชาเอก'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3">
+        <q-input
+          :class="getClass(isStatusRegister)"
+          :outlined="isStatusRegister"
+          dense
+          lazy-rules
+          autogrow
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          v-model="defaultEducation.educationLocation"
+          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อสถานศึกษา'}`]"
+          :label="`${'ชื่อสถานศึกษา'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3">
+        <q-select
+          :class="getClass(isStatusRegister)"
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          :outlined="isStatusRegister"
+          dense
+          lazy-rules
+          emit-value
+          map-options
+          option-label="name"
+          option-value="id"
+          :options="educationTypeOptions"
+          v-model="defaultEducation.educationType"
+          :rules="[(val) => !!val || `${'กรุณาเลือก ประเภทสถานศึกษา'}`]"
+          :label="`${'ประเภทสถานศึกษา'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3">
+        <datepicker
+          :readonly="!isStatusRegister"
+          v-model="defaultEducation.educationEndDate"
+          :locale="'th'"
+          autoApply
+          :enableTimePicker="false"
+          week-start="0"
+          :max-date="dateCondition"
+          :disabled="!isStatusRegister"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              :class="getClass(isStatusRegister)"
+              :outlined="isStatusRegister"
+              dense
+              lazy-rules
+              :readonly="!isStatusRegister"
+              :borderless="!isStatusRegister"
+              :model-value="
+                defaultEducation.educationEndDate == null
+                  ? null
+                  : date2Thai(defaultEducation.educationEndDate)
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`]"
+              :label="`${'วันที่สำเร็จการศึกษา'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  :style="
+                    status == 'register' || status == 'rejectRegister'
+                      ? 'color: var(--q-primary)'
+                      : 'color: var(--q-grey)'
+                  "
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+      </div>
+      <div class="col-xs-12 col-sm-3">
+        <q-input
+          :class="getClass(isStatusRegister)"
+          :outlined="isStatusRegister"
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          dense
+          lazy-rules
+          type="number"
+          v-model="defaultEducation.educationScores"
+          :rules="[(val) => !!val || `${'กรุณากรอก คะแนนเฉลี่ยสะสม'}`]"
+          :label="`${'คะแนนเฉลี่ยสะสม'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3">
+        <q-select
+          :class="getClass(isStatusRegister)"
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          :outlined="isStatusRegister"
+          dense
+          lazy-rules
+          emit-value
+          map-options
+          option-label="name"
+          option-value="id"
+          :options="educationLevelHigherOptions"
+          v-model="defaultEducation.educationLevelHighId"
+          :rules="[(val) => !!val || `${'กรุณาเลือก วุฒิการศึกษาสูงสุด'}`]"
+          :label="`${'วุฒิการศึกษาสูงสุด'}`"
+        />
       </div>
     </div>
-  </q-form>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch, PropType, computed } from 'vue'

src/modules/01_exam/components/Form/Information.vue

@@ -1,6 +1,6 @@
 <!-- card ข้อมูลส่วนตัว -->
 <template>
-  <q-form ref="myform" class="col-12 row justify-center">
+  <div class="col-12 row justify-center">
     <div class="row col-xs-12 col-sm-12 col-md-9 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
       <div class="col-12">
         <HeaderTop
@@ -12,6 +12,7 @@
           :editData="false"
         />
       </div>
+
       <div class="col-xs-12 col-sm-3 col-md-4">
         <q-field
           :outlined="isStatusRegister"
@@ -352,7 +353,7 @@
         type="textarea"
       />
     </div> -->
-  </q-form>
+  </div>
 
   <!--  dialog กรอกเลขบัตร -->
   <q-dialog v-model="idModel">

src/modules/01_exam/components/Form/Occupation.vue

@@ -8,131 +8,130 @@
     :editOnly="false"
     :editData="false"
   />
-  <q-form ref="myform">
-    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-      <div class="col-12">
-        <q-radio
-          v-model="defaultOccupation.positionType"
-          label="ลูกจ้างประจำ"
-          color="teal"
-          val="prem"
-          :disable="!isStatusRegister"
-        />
-        <q-radio
-          v-model="defaultOccupation.positionType"
-          label="ลูกจ้างชั่วคราว"
-          color="teal"
-          val="temp"
-          :disable="!isStatusRegister"
-        />
-        <q-radio
-          v-model="defaultOccupation.positionType"
-          label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
-          color="teal"
-          val="other"
-          :disable="!isStatusRegister"
+
+  <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+    <div class="col-12">
+      <q-radio
+        v-model="defaultOccupation.positionType"
+        label="ลูกจ้างประจำ"
+        color="teal"
+        val="prem"
+        :disable="!isStatusRegister"
+      />
+      <q-radio
+        v-model="defaultOccupation.positionType"
+        label="ลูกจ้างชั่วคราว"
+        color="teal"
+        val="temp"
+        :disable="!isStatusRegister"
+      />
+      <q-radio
+        v-model="defaultOccupation.positionType"
+        label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
+        color="teal"
+        val="other"
+        :disable="!isStatusRegister"
+      />
+    </div>
+    <div class="col-12 row">
+      <div class="col-3">
+        <q-input
+          :class="getClass(isStatusRegister)"
+          :outlined="isStatusRegister"
+          dense
+          lazy-rules
+          autogrow
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          v-model="defaultOccupation.position"
+          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
+          :label="`${'ชื่อตำแหน่ง'}`"
         />
       </div>
-      <div class="col-12 row">
-        <div class="col-3">
-          <q-input
-            :class="getClass(isStatusRegister)"
-            :outlined="isStatusRegister"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            v-model="defaultOccupation.position"
-            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
-            :label="`${'ชื่อตำแหน่ง'}`"
-          />
-        </div>
-        <div class="col-3">
-          <CurrencyInput
-            class="q-pl-sm"
-            :class="getClass(isStatusRegister)"
-            :outlined="isStatusRegister"
-            :options="{
-              currency: 'THB'
-            }"
-            lazy-rules
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            v-model="defaultOccupation.salary"
-            :rules="[(val:number| undefined) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
-            :label="`${'เงินเดือน'}`"
-          />
-        </div>
-      </div>
-      <div class="col-12 row">
-        <div class="col-3">
-          <q-input
-            :class="getClass(isStatusRegister)"
-            :outlined="isStatusRegister"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            v-model="defaultOccupation.group"
-            :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
-            :label="`${'กลุ่ม/ฝ่าย'}`"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            class="q-pl-sm"
-            :class="getClass(isStatusRegister)"
-            :outlined="isStatusRegister"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            v-model="defaultOccupation.pile"
-            :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
-            :label="`${'กอง'}`"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            class="q-pl-sm"
-            :class="getClass(isStatusRegister)"
-            :outlined="isStatusRegister"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            v-model="defaultOccupation.org"
-            :rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
-            :label="`${'สังกัด'}`"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            class="q-pl-sm"
-            :class="getClass(isStatusRegister)"
-            :outlined="isStatusRegister"
-            dense
-            lazy-rules
-            :readonly="!isStatusRegister"
-            :borderless="!isStatusRegister"
-            v-model="defaultOccupation.tel"
-            :rules="[(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์']"
-            :label="`${'เบอร์โทรที่ทำงาน'}`"
-            maxlength="20"
-          />
-          <!-- :counter="isStatusRegister ? true : false" -->
-          <!-- (val) =>
-                (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
-                'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง' -->
-          <!-- type="tel" mask="##########" autogrow -->
-        </div>
+      <div class="col-3">
+        <CurrencyInput
+          class="q-pl-sm"
+          :class="getClass(isStatusRegister)"
+          :outlined="isStatusRegister"
+          :options="{
+            currency: 'THB'
+          }"
+          lazy-rules
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          v-model="defaultOccupation.salary"
+          :rules="[(val:number| undefined) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
+          :label="`${'เงินเดือน'}`"
+        />
       </div>
     </div>
-  </q-form>
+    <div class="col-12 row">
+      <div class="col-3">
+        <q-input
+          :class="getClass(isStatusRegister)"
+          :outlined="isStatusRegister"
+          dense
+          lazy-rules
+          autogrow
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          v-model="defaultOccupation.group"
+          :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
+          :label="`${'กลุ่ม/ฝ่าย'}`"
+        />
+      </div>
+      <div class="col-3">
+        <q-input
+          class="q-pl-sm"
+          :class="getClass(isStatusRegister)"
+          :outlined="isStatusRegister"
+          dense
+          lazy-rules
+          autogrow
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          v-model="defaultOccupation.pile"
+          :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
+          :label="`${'กอง'}`"
+        />
+      </div>
+      <div class="col-3">
+        <q-input
+          class="q-pl-sm"
+          :class="getClass(isStatusRegister)"
+          :outlined="isStatusRegister"
+          dense
+          lazy-rules
+          autogrow
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          v-model="defaultOccupation.org"
+          :rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
+          :label="`${'สังกัด'}`"
+        />
+      </div>
+      <div class="col-3">
+        <q-input
+          class="q-pl-sm"
+          :class="getClass(isStatusRegister)"
+          :outlined="isStatusRegister"
+          dense
+          lazy-rules
+          :readonly="!isStatusRegister"
+          :borderless="!isStatusRegister"
+          v-model="defaultOccupation.tel"
+          :rules="[(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์']"
+          :label="`${'เบอร์โทรที่ทำงาน'}`"
+          maxlength="20"
+        />
+        <!-- :counter="isStatusRegister ? true : false" -->
+        <!-- (val) =>
+                (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+                'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง' -->
+        <!-- type="tel" mask="##########" autogrow -->
+      </div>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'

src/modules/01_exam/components/Form/Profile.vue

@@ -1,5 +1,6 @@
 <!-- tab ข้อมูลส่วนบุคคล -->
 <template>
+  <!-- <q-form greedy @submit.prevent @validation-success="onSubmitForm"> -->
   <div class="q-px-sm">
     <Information
       :prefixOptions="prefixOptions"
@@ -62,6 +63,8 @@
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
+
+  <!-- </q-form> -->
   <!-- <div class="q-px-sm">
     <Document :status="status" />
   </div> -->