pull/6687/head
Cagatay Civici 2024-10-30 14:31:25 +03:00
commit 12b681ab66
2 changed files with 26 additions and 20 deletions

View File

@ -141,9 +141,12 @@ export default {
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
city: z.object({ city: z.union([
cname: z.string().min(1, 'City is required.') z.object({
}) cname: z.string().min(1, 'City is required.')
}),
z.any().refine((val) => false, { message: 'City is required.' })
])
}) })
), ),
countries: [ countries: [
@ -259,9 +262,12 @@ const initialValues = ref({
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
city: z.object({ city: z.union([
cname: z.string().min(1, 'City is required.') z.object({
}) cname: z.string().min(1, 'City is required.')
}),
z.any().refine((val) => false, { message: 'City is required.' })
])
}) })
)); ));

View File

@ -5,8 +5,8 @@
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<InputNumber name="number" fluid /> <InputNumber name="amount" fluid />
<Message v-if="$form.number?.invalid" severity="error" size="small" variant="simple">{{ $form.number.error?.message }}</Message> <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -22,19 +22,19 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
number: 5 amount: 5
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
number: z.number().gt(0, { message: 'Must be greater than 0.' }).lt(10, { message: 'Must be less than 10.' }) amount: z.union([z.number().gt(0, { message: 'Must be greater than 0.' }).lt(10, { message: 'Must be less than 10.' }), z.literal(null)]).refine((val) => val !== null, { message: 'Number is required.' })
}) })
), ),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<InputNumber name="number" fluid /> <InputNumber name="amount" fluid />
<Message v-if="$form.number?.invalid" severity="error" size="small" variant="simple">{{ $form.number.error?.message }}</Message> <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -44,8 +44,8 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<InputNumber name="number" fluid /> <InputNumber name="amount" fluid />
<Message v-if="$form.number?.invalid" severity="error" size="small" variant="simple">{{ $form.number.error?.message }}</Message> <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -60,11 +60,11 @@ export default {
data() { data() {
return { return {
initialValues: { initialValues: {
number: 5 amount: 5
}, },
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
number: z.number().gt(0, { message: 'Must be greater than 0.' }).lt(10, { message: 'Must be less than 10.' }) amount: z.union([z.number().gt(0, { message: 'Must be greater than 0.' }).lt(10, { message: 'Must be less than 10.' }), z.literal(null)]).refine((val) => val !== null, { message: 'Number is required.' })
}) })
) )
} }
@ -85,8 +85,8 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<InputNumber name="number" fluid /> <InputNumber name="amount" fluid />
<Message v-if="$form.number?.invalid" severity="error" size="small" variant="simple">{{ $form.number.error?.message }}</Message> <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
</Form> </Form>
@ -101,11 +101,11 @@ import { z } from 'zod';
const toast = useToast(); const toast = useToast();
const initialValues = ref({ const initialValues = ref({
number: 5 amount: 5
}); });
const resolver = ref(zodResolver( const resolver = ref(zodResolver(
z.object({ z.object({
number: z.number().gt(0, { message: 'Must be greater than 0.' }).lt(10, { message: 'Must be less than 10.' }) amount: z.union([z.number().gt(0, { message: 'Must be greater than 0.' }).lt(10, { message: 'Must be less than 10.' }), z.literal(null)]).refine((val) => val !== null, { message: 'Number is required.' })
}) })
)); ));