vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

AutoComplete form updates

pull/6632/head
tugcekucukoglu 2024-10-23 09:36:02 +03:00
parent 4699766152
commit 20d733c0fd
1 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
apps/showcase/doc/autocomplete/FormDoc.vue
View File

@ -3,9 +3,9 @@
<p>AutoComplete can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText>
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-80">
<div class="flex flex-col gap-2">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
<Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
@ -29,9 +29,12 @@ export default {
filteredCountries: null,
resolver: zodResolver(
z.object({
country: z.object({
name: z.string().min(1, 'Country cannot be empty.')
})
country: z.union([
z.object({
name: z.string().min(1, 'Country required.')
}),
z.any().refine((val) => false, { message: 'Country required.' })
])
})
),
code: {
@ -73,9 +76,12 @@ export default {
filteredCountries: null,
resolver: zodResolver(
z.object({
country: z.object({
name: z.string().min(1, 'Country cannot be empty.')
})
country: z.union([
z.object({
name: z.string().min(1, 'Country required.')
}),
z.any().refine((val) => false, { message: 'Country required.' })
])
})
)
}
@ -136,9 +142,12 @@ const initialValues = ref({
const resolver = ref(
zodResolver(
z.object({
country: z.object({
name: z.string().min(1, 'Country cannot be empty.')
})
country: z.union([
z.object({
name: z.string().min(1, 'Country required.')
}),
z.any().refine((val) => false, { message: 'Country required.' })
])
})
));
const countries = ref();