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

AutoComplete Form doc

pull/6632/head
tugcekucukoglu 2024-10-22 09:31:03 +03:00
parent 5bf013c73d
commit 22f5f8e18b
1 changed files with 7 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,26 +21,22 @@ export default {
data() { data() {
return { return {
defaultValues: { defaultValues: {
country: '' country: { name: '' }
}, },
countries: null, countries: null,
filteredCountries: null, filteredCountries: null,
resolver: null, resolver: null,
schema: z.object({ schema: z.object({
country: z.string().refine((val) => val.name !== '', { country: z.object({
message: 'Please select a country.' name: z.string().min(1, 'Country cannot be empty.')
}) })
}), }),
code: { code: {
basic: ` basic: `
<Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4"> <Form v-slot="$form" :resolver="resolver" :defaultValues="defaultValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<InputText name="username" type="text" placeholder="Username" /> <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message> <Message v-if="$form.country?.invalid" severity="error">{{ $form.country.errors[0]?.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="email" type="text" placeholder="Email" />
<Message v-if="$form.email?.invalid" severity="error">{{ $form.email.errors[0]?.message }}</Message>
</div> </div>
<Button type="submit" severity="secondary" class="self-center p-2">Submit</Button> <Button type="submit" severity="secondary" class="self-center p-2">Submit</Button>
</Form> </Form>
@ -95,10 +91,8 @@ const value = ref(null);
} }
}, 250); }, 250);
}, },
onFormSubmit(x) { onFormSubmit({ valid }) {
console.log(x); if (valid) {
if (x.valid) {
this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
} }
} }