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">
+      <form @submit.prevent.stop="onSubmit">
-        <q-select
+        <q-card-section class="q-gutter-x-md row">
-          class="col-3"
+          <q-select
-          outlined
+            ref="categoryRef"
-          dense
+            class="col-3"
-          emit-value
+            outlined
-          map-options
+            dense
-          v-model="categoryId"
+            emit-value
-          :options="options"
+            map-options
-          option-value="value"
+            v-model="categoryId"
-          option-label="label"
+            :options="options"
-          label="หมวดหมู่"
+            option-value="value"
-        />
+            option-label="label"
-        <q-input
+            label="หมวดหมู่"
-          class="col-grow"
+            lazy-rules
-          outlined
+            :rules="[
-          dense
+              (val) => (val !== null && val !== '') || 'กรุณาเลือหมวดหมู่',
-          v-model="title"
+            ]"
-          label="ชื่อเรื่อง"
+          />
-        />
+          <q-input
-      </q-card-section>
+            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-card-actions align="right">
-        <q-btn flat v-close-popup label="ยกเลิก" text-color="primary" />
+          <q-btn flat v-close-popup label="ยกเลิก" text-color="primary" />
-        <q-btn
+          <q-btn
-          @click="
+            type="submit"
-            async () => {
+            label="บันทึก"
-              await store.newIssue(title, categoryId);
+            color="primary"
-              isOpen = false;
+            text-color="white"
-            }
+          />
-          "
+        </q-card-actions>
-          label="บันทึก"
+      </form>
-          color="primary"
-          text-color="white"
-        />
-      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>