use form ref with validation

This commit is contained in:
Gauthier Roebroeck 2025-08-06 14:12:13 +08:00
parent c6f6db1056
commit 584418eb8a
3 changed files with 15 additions and 10 deletions

View file

@ -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
}

View file

@ -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 {

View file

@ -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)
}