Files

Khafid Prayoga d6b288404f feat(division): add division management pages and form validation

- 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

2025-08-29 10:42:07 +07:00

1.8 KiB

Raw Blame History

useFormErrors Composable

Composable untuk menangani form validation errors seperti Laravel. Mengkonversi ZodError menjadi format yang mudah digunakan di template.

Penggunaan

Basic Usage

// 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

<!-- Pass errors ke form component -->
<AppDivisonEntryForm v-model="data" :errors="errors" />

Di Form Component

<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:

Field memiliki id prop yang sesuai dengan field name
Field menerima errors prop
Ada error untuk field tersebut di dalam errors object

Error akan ditampilkan dengan class .field-error-info yang sudah di-style dengan warna merah.

1.8 KiB Raw Blame History