fix:validate

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'