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> <p>AutoComplete can be used with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <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"> <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> <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" label="Submit" /> <Button type="submit" severity="secondary" label="Submit" />
@ -29,9 +29,12 @@ export default {
filteredCountries: null, filteredCountries: null,
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
country: z.object({ country: z.union([
name: z.string().min(1, 'Country cannot be empty.') z.object({
}) name: z.string().min(1, 'Country required.')
}),
z.any().refine((val) => false, { message: 'Country required.' })
])
}) })
), ),
code: { code: {
@ -73,9 +76,12 @@ export default {
filteredCountries: null, filteredCountries: null,
resolver: zodResolver( resolver: zodResolver(
z.object({ z.object({
country: z.object({ country: z.union([
name: z.string().min(1, 'Country cannot be empty.') 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( const resolver = ref(
zodResolver( zodResolver(
z.object({ z.object({
country: z.object({ country: z.union([
name: z.string().min(1, 'Country cannot be empty.') z.object({
}) name: z.string().min(1, 'Country required.')
}),
z.any().refine((val) => false, { message: 'Country required.' })
])
}) })
)); ));
const countries = ref(); const countries = ref();