feat (material): add zod validation for stock field to ensure number input in entry-form

This commit is contained in:
riefive
2025-09-03 12:23:21 +07:00
parent da9830e16d
commit e5d995b9ee
3 changed files with 22 additions and 4 deletions
+20 -2
View File
@@ -3,14 +3,32 @@ import Block from '~/components/pub/custom-ui/form/block.vue'
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
import Field from '~/components/pub/custom-ui/form/field.vue'
import Label from '~/components/pub/custom-ui/form/label.vue'
import { z } from 'zod'
const props = defineProps<{ modelValue: any }>()
const emit = defineEmits(['update:modelValue', 'event'])
const schema = z.object({
code: z.string(),
name: z.string(),
type: z.string(),
stock: z.preprocess((val) => Number(val), z.number({ invalid_type_error: "Stok harus berupa angka" })),
})
const data = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val),
set: (val) => {
const result = schema.safeParse(val)
if (!result.success) {
// You can handle the error here, e.g. show a message
const errorMessage = result.error.errors[0]?.message ?? 'Validation error occurred'
alert(errorMessage)
return
}
emit('update:modelValue', val)
},
})
const items = [
{ value: 'item1', label: 'Item 1' },
{ value: 'item2', label: 'Item 2' },
@@ -43,7 +61,7 @@ const items = [
<FieldGroup :column="1">
<Label>Satuan</Label>
<Field>
<Select v-model="data.type" :items="items" placeholder="Pilih item" />
<Select v-model="data.stock" :items="items" placeholder="Pilih item" />
</Field>
</FieldGroup>
<FieldGroup :column="1">
+1 -1
View File
@@ -67,6 +67,6 @@
"vue-router": "^4.5.1",
"vue-sonner": "^1.3.0",
"vue-tsc": "^2.1.10",
"zod": "^3.24.2"
"zod": "^3.25.76"
}
}
+1 -1
View File
@@ -161,7 +161,7 @@ devDependencies:
specifier: ^2.1.10
version: 2.2.12(typescript@5.9.2)
zod:
specifier: ^3.24.2
specifier: ^3.25.76
version: 3.25.76
packages: