如何处理 FormFields 数组的 Shadcn/ui 错误消息

Question

我正在开发一个包含 2 个对象数组的表单。它们正在按预期工作，我现在正在努力为它们显示错误消息。这是我目前拥有的代码：

<div className="mb-10">
  <h2 className="mb-2 text-xl font-semibold">
    Can you list the key steps you need to take?
  </h2>
  <div className="flex flex-col gap-2">
    {stepFields.map((field, i) => (
      <FormField
        key={field.id}
        name={`steps[${i}].title`}
        render={() => (
          <FormItem>
            <div className="flex gap-2">
              <Button variant={"ghost"} onClick={() => removeStep(i)}>
                <LuTrash2 className="h-5 w-5" />
              </Button>
              <FormControl>
                <div className="flex w-full gap-2">
                  <Input
                    {...form.register(`steps.${i}.title`, {
                      required: true,
                    })}
                    placeholder={`Step ${i + 1}`}
                    className="w-full bg-zinc-50 p-2"
                  />
                  <Input
                    {...form.register(`steps.${i}.date`, {
                      required: true,
                    })}
                    type="date"
                  />
                </div>
              </FormControl>
            </div>
          </FormItem>
        )}
      />
    ))}
    <Button
      variant={"secondary"}
      className="border"
      onClick={() => addStep({ title: "", date: "" })}
      type="button"
    >
      Add step
    </Button>
  </div>
</div>;

现在我想使用 Shadcn/ui 中的

<FormMessage />

和

<FormLabel />

组件显示我的 Zod 验证错误消息。但是，如果我将它们放入数组中，它们会出现多次...

有没有人遇到过这种情况并找到解决方法。例如，是否可以将字段手动附加到 FormLabel，或者它始终必须位于 FormField > FormItem 内。

仅供参考，shadcn/ui 在底层使用了 React-hook-form。

Answer 1

如果您想在第一项下方显示错误消息：

{ !i && <FormMessage /> }

对于最后一项：

{ i+1 == stepFields.length && <FormMessage /> }