From 584418eb8a3bdccf480b8606953670627857b4c9 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Wed, 6 Aug 2025 14:12:13 +0800
Subject: [PATCH] use form ref with validation

---
 next-ui/src/components/dialog/Confirm.vue     | 7 +++++--
 next-ui/src/components/dialog/ConfirmEdit.vue | 9 +++++----
 next-ui/src/components/server/Settings.vue    | 9 +++++----
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/next-ui/src/components/dialog/Confirm.vue b/next-ui/src/components/dialog/Confirm.vue
index 8db79a98..2aec4103 100644
--- a/next-ui/src/components/dialog/Confirm.vue
+++ b/next-ui/src/components/dialog/Confirm.vue
@@ -8,6 +8,7 @@
   >
     <template #default="{ isActive }">
       <v-form
+        ref="form"
         v-model="formValid"
         :disabled="loading"
         class="fill-height"
@@ -83,10 +84,12 @@ const emit = defineEmits<{
   confirm: []
 }>()
 
+const form = ref()
 const formValid = ref<boolean>(false)
 
-function submitForm(isActive: Ref<boolean, boolean>) {
-  if (formValid.value) {
+async function submitForm(isActive: Ref<boolean, boolean>) {
+  const { valid } = await form.value.validate()
+  if (valid) {
     emit('confirm')
     if (closeOnSave) isActive.value = false
   }
diff --git a/next-ui/src/components/dialog/ConfirmEdit.vue b/next-ui/src/components/dialog/ConfirmEdit.vue
index 926b25db..ab0b345c 100644
--- a/next-ui/src/components/dialog/ConfirmEdit.vue
+++ b/next-ui/src/components/dialog/ConfirmEdit.vue
@@ -15,7 +15,7 @@
       >
         <template #default="{ model: proxyModel, cancel, save, isPristine }">
           <v-form
-            v-model="formValid"
+            ref="form"
             :disabled="loading"
             class="fill-height"
             @submit.prevent="submitForm(save)"
@@ -71,10 +71,11 @@
 const showDialog = defineModel<boolean>('dialog', { required: false })
 const record = defineModel<unknown>('record', { required: true })
 
-const formValid = ref<boolean>(false)
+const form = ref()
 
-function submitForm(callback: () => void) {
-  if (formValid.value) callback()
+async function submitForm(callback: () => void) {
+  const { valid } = await form.value.validate()
+  if (valid) callback()
 }
 
 export interface DialogConfirmEditProps {
diff --git a/next-ui/src/components/server/Settings.vue b/next-ui/src/components/server/Settings.vue
index 5ebede41..a896f35b 100644
--- a/next-ui/src/components/server/Settings.vue
+++ b/next-ui/src/components/server/Settings.vue
@@ -5,7 +5,7 @@
   >
     <template #default="{ model: proxyModel, cancel, save, isPristine }">
       <v-form
-        v-model="formValid"
+        ref="form"
         :disabled="loading"
         @submit.prevent="submitForm(save)"
       >
@@ -373,10 +373,11 @@ watch(
   { immediate: true },
 )
 
-const formValid = ref<boolean>(false)
+const form = ref()
 
-function submitForm(callback: () => void) {
-  if (formValid.value) {
+async function submitForm(callback: () => void) {
+  const { valid } = await form.value.validate()
+  if (valid) {
     callback()
     emit('updateSettings', settingsUpdate.value)
   }