From e8b5f98260b78881a092ac63259059a0971a116c Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Wed, 22 Apr 2026 08:40:14 +0800
Subject: [PATCH] feat(front): add error handling to InputGroupField component
 with aria attributes for accessibility

---
 front/components/Field/InputGroupField.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/front/components/Field/InputGroupField.vue b/front/components/Field/InputGroupField.vue
index 2d6ece9..700497b 100644
--- a/front/components/Field/InputGroupField.vue
+++ b/front/components/Field/InputGroupField.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
     label?: string
     rules?: RuleExpression<string[]>
 }>()
-const { value, setValue } = useField<string[]>(props.name, props?.rules)
+const { value, setValue, errorMessage } = useField<string[]>(props.name, props?.rules)
 const addInput = ref('')
 </script>
 
@@ -17,22 +17,28 @@ const addInput = ref('')
             <Input
                 :model-value="item"
                 @update:model-value="(v: string | number) => setValue(value.map((o, i) => (i === index ? String(v) : o)))"
+                :aria-invalid="!!errorMessage || undefined"
                 v-bind="$attrs"
             />
             <Button variant="ghost" size="icon" @click="setValue(value.filter((_, i) => i !== index))"><LucideX class="size-4" /></Button>
         </div>
         <div class="flex flex-row gap-2 items-center">
-            <Input v-model="addInput" v-bind="$attrs" />
+            <Input v-model="addInput" :aria-invalid="!!errorMessage || undefined" v-bind="$attrs" />
             <Button
                 size="icon"
                 @click="
                     () => {
-                        setValue([...(value || []), addInput])
+                        const nextValue = addInput.trim()
+                        if (!nextValue) {
+                            return
+                        }
+                        setValue([...(value || []), nextValue])
                         addInput = ''
                     }
                 "
                 ><LucidePlus class="size-4"
             /></Button>
         </div>
+        <p v-if="errorMessage" class="text-sm text-destructive">{{ errorMessage }}</p>
     </div>
 </template>