arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 15:01:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Form): handle @error event (#718)

Browse Source 
Co-authored-by: Albert <albert@Alberts-MacBook-Pro.local>
Co-authored-by: Romain Hamel <romain@boilr.io>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Albert
2023-10-10 11:47:22 -04:00
committed by GitHub
parent 1df07e2b4c
commit e16379fdbd
12 changed files with 142 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docs/content/3.forms/10.form.md
View File

@@ -35,7 +35,6 @@ You can provide a schema from [Yup](#yup), [Zod](#zod) or [Joi](#joi), [Valibot]
:component-example{component="form-example-joi" :componentProps='{"class": "space-y-4 w-60"}'}
### Valibot
:component-example{component="form-example-valibot" :componentProps='{"class": "space-y-4 w-60"}'}
@@ -87,7 +86,7 @@ You can manually set errors after form submission if required. To do this, simpl
```vue
<script setup lang="ts">
import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
import type { FormError, FormSubmitEvent } from '#ui/types'
const state = reactive({
email: undefined,
@@ -96,7 +95,7 @@ const state = reactive({
const form = ref()
async function submit (event: FormSubmitEvent<any>) {
async function onSubmit (event: FormSubmitEvent<any>) {
form.value.clear()
try {
const response = await $fetch('...')
@@ -112,7 +111,7 @@ async function submit (event: FormSubmitEvent<any>) {
</script>
<template>
<UForm ref="form" :state="state" @submit="submit">
<UForm ref="form" :state="state" @submit="onSubmit">
<UFormGroup label="Email" name="email">
<UInput v-model="state.email" />
</UFormGroup>
@@ -138,6 +137,18 @@ The Form component automatically triggers validation upon `submit`, `input`, `bl
Take a look at the component!
::
## Error event :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
You can listen to the `@error` event to handle errors. This event is triggered when the form is validated and contains an array of `FormError` objects with the following fields:
- `id` - the identifier of the form element.
- `path` - the path to the form element matching the `name`.
- `message` - the error message to display.
Here is an example of how to focus the first form element with an error:
:component-example{component="form-example-on-error" :componentProps='{"class": "space-y-4 w-60"}'}
## Props
:component-props