เเก้ validate เเล้ว input ลอย

src/modules/07_insignia/components/4_Allocate/DialogForm.vue

@@ -5,9 +5,9 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import { useRouter } from "vue-router";
 const $q = useQuasar();
-const myForm = ref<QForm>();
+const myForm = ref<QForm | null>(null); //form data input
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+const { dialogConfirm,dialogMessageNotify } = mixin;
 const router = useRouter();
 const routeName = router.currentRoute.value.name;
 const amount = ref<number | null>();
@@ -42,8 +42,18 @@ watch(props, () => {
 });
 
 const clickSave = () => {
-  dialogConfirm($q, () => props.save(grandCross.value, amount.value));
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (success) => {
+      if (success) {
+        dialogConfirm($q, () => props.save(grandCross.value, amount.value));
+      }else {
+        dialogMessageNotify($q,"กรุณาข้อมูลให้ครบ")
+      }
+    })
+  }
 };
+
+
 </script>
 
 <template>
@@ -65,7 +75,7 @@ const clickSave = () => {
       <q-form ref="myForm">
         <div class="q-pa-md">
           <div
-            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
           >
             <div class="col-6">
               <q-select
@@ -79,6 +89,7 @@ const clickSave = () => {
                 map-options
                 outlined
                 options-cover
+                :rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`,]"
                 v-model="grandCross"
                 :label="
                   routeName == 'insigniaAllocate'
@@ -86,6 +97,7 @@ const clickSave = () => {
                     : `เลือกหน่วยงาน`
                 "
               />
+
             </div>
             <div class="col-xs-12 col-sm-6">
               <q-input
@@ -97,6 +109,7 @@ const clickSave = () => {
                 lazy-rules
                 type="number"
                 label="จำนวน"
+                :rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`,]"
               />
               <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
             </div>
@@ -107,7 +120,7 @@ const clickSave = () => {
       <q-separator />
       <div class="row justify-end q-py-sm">
         <div class="q-px-md">
-          <q-btn label="บันทึก" @click="clickSave" color="public" />
+          <q-btn label="บันทึก" @click="clickSave" color="public" :disable="grandCross == '' || amount == null || amount == 0" />
         </div>
       </div>
     </q-card>