d6b288404f
- Create new division list and add pages - Implement form validation using zod and error handling - Add useFormErrors composable for form error management - Update division entry form with validation support - Add error styling in main.css
74 lines
1.8 KiB
Markdown
74 lines
1.8 KiB
Markdown
# useFormErrors Composable
|
|
|
|
Composable untuk menangani form validation errors seperti Laravel. Mengkonversi ZodError menjadi format yang mudah digunakan di template.
|
|
|
|
## Penggunaan
|
|
|
|
### Basic Usage
|
|
|
|
```typescript
|
|
// Di component parent (entry.vue)
|
|
const { errors, setFromZodError, clearErrors } = useFormErrors()
|
|
|
|
// Validasi dengan Zod
|
|
const result = schema.safeParse(data.value)
|
|
if (!result.success) {
|
|
setFromZodError(result.error)
|
|
return
|
|
}
|
|
```
|
|
|
|
### Di Template
|
|
|
|
```vue
|
|
<!-- Pass errors ke form component -->
|
|
<AppDivisonEntryForm v-model="data" :errors="errors" />
|
|
```
|
|
|
|
### Di Form Component
|
|
|
|
```vue
|
|
<script setup>
|
|
import type { FormErrors } from '~/composables/useFormErrors'
|
|
|
|
const props = defineProps<{
|
|
modelValue: any
|
|
errors?: FormErrors
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Setiap Field harus memiliki id yang sesuai dengan field name -->
|
|
<Field id="name" :errors="errors">
|
|
<Input v-model="data.name" />
|
|
</Field>
|
|
</template>
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Methods
|
|
|
|
- `setFromZodError(zodError)` - Set errors dari ZodError
|
|
- `setErrors(errors)` - Set errors manual
|
|
- `setError(field, message)` - Set error untuk field tertentu
|
|
- `clearError(field)` - Hapus error untuk field tertentu
|
|
- `clearErrors()` - Hapus semua errors
|
|
- `hasError(field)` - Cek apakah ada error untuk field
|
|
- `getError(field)` - Ambil error message untuk field
|
|
|
|
### Computed Properties
|
|
|
|
- `hasErrors` - Boolean apakah ada error
|
|
- `errorMessages` - Array semua error messages
|
|
- `firstError` - Error pertama (untuk alert general)
|
|
|
|
## Field Component
|
|
|
|
Field component akan otomatis menampilkan error jika:
|
|
1. Field memiliki `id` prop yang sesuai dengan field name
|
|
2. Field menerima `errors` prop
|
|
3. Ada error untuk field tersebut di dalam errors object
|
|
|
|
Error akan ditampilkan dengan class `.field-error-info` yang sudah di-style dengan warna merah.
|