# 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.