validate ตอนเพิ่มเรื่องใหม่ support

src/modules/00_support/components/NewIssue.vue

@@ -6,8 +6,9 @@ const store = useSupportStore();
 
 const isOpen = ref<boolean>(false);
 const title = ref<string>("");
+const titleRef = ref();
 const categoryId = ref<string>("");
-
+const categoryRef = ref();
 const options = ref<{ label: string; value: string }[]>([]);
 
 onMounted(async () => {
@@ -19,10 +20,21 @@ onMounted(async () => {
     }));
   }
 });
+
+async function onSubmit() {
+  titleRef.value.validate();
+  categoryRef.value.validate();
+  if (titleRef.value.hasError || categoryRef.value.hasError) return "";
+  await store.newIssue(title.value, categoryId.value);
+  isOpen.value = false;
+}
 </script>
 
 <template>
-  <div @click="isOpen = true" class="col-10 row items-center q-py-sm q-px-md new">
+  <div
+    @click="isOpen = true"
+    class="col-10 row items-center q-py-sm q-px-md new"
+  >
     <div class="noactive-avatar">
       <div class="new-avatar">
         <q-icon name="mdi-plus" size="24px" color="primary" />
@@ -50,42 +62,49 @@ onMounted(async () => {
         />
       </q-card-section>
 
-      <q-card-section class="q-gutter-x-md row">
-        <q-select
-          class="col-3"
-          outlined
-          dense
-          emit-value
-          map-options
-          v-model="categoryId"
-          :options="options"
-          option-value="value"
-          option-label="label"
-          label="หมวดหมู่"
-        />
-        <q-input
-          class="col-grow"
-          outlined
-          dense
-          v-model="title"
-          label="ชื่อเรื่อง"
-        />
-      </q-card-section>
+      <form @submit.prevent.stop="onSubmit">
+        <q-card-section class="q-gutter-x-md row">
+          <q-select
+            ref="categoryRef"
+            class="col-3"
+            outlined
+            dense
+            emit-value
+            map-options
+            v-model="categoryId"
+            :options="options"
+            option-value="value"
+            option-label="label"
+            label="หมวดหมู่"
+            lazy-rules
+            :rules="[
+              (val) => (val !== null && val !== '') || 'กรุณาเลือหมวดหมู่',
+            ]"
+          />
+          <q-input
+            ref="titleRef"
+            class="col-grow"
+            outlined
+            dense
+            v-model="title"
+            label="ชื่อเรื่อง"
+            lazy-rules
+            :rules="[
+              (val) => (val && val.length > 0) || 'กรุณาเพิ่มชื่อเรื่อง',
+            ]"
+          />
+        </q-card-section>
 
-      <q-card-actions align="right">
-        <q-btn flat v-close-popup label="ยกเลิก" text-color="primary" />
-        <q-btn
-          @click="
-            async () => {
-              await store.newIssue(title, categoryId);
-              isOpen = false;
-            }
-          "
-          label="บันทึก"
-          color="primary"
-          text-color="white"
-        />
-      </q-card-actions>
+        <q-card-actions align="right">
+          <q-btn flat v-close-popup label="ยกเลิก" text-color="primary" />
+          <q-btn
+            type="submit"
+            label="บันทึก"
+            color="primary"
+            text-color="white"
+          />
+        </q-card-actions>
+      </form>
     </q-card>
   </q-dialog>
 </template>