动态数组示例

使用 FieldArray 组件管理动态表单数组。

功能特性

✅ 动态添加/删除数组项
✅ 数组项验证
✅ 数组排序（上移/下移）
✅ 最小/最大数量限制

代码示例

const form = useFormState({
  fields: {
    members: {
      defaultValue: [{ name: '', email: '', role: 'developer' }]
    }
  }
});

<FieldArray name="members" formState={form}>
  {#snippet children({ fields, append, remove, move })}
    {#each fields as field, index (field.key)}
      <button onclick={() => move(index, index - 1)}>上移</button>
      <button onclick={() => move(index, index + 1)}>下移</button>
      <button onclick={() => remove(index)}>删除</button>

      <FormField name={`members[${index}].name`}>
        ...
      </FormField>
    {/each}
    <button onclick={() => append({ name: '', email: '', role: 'developer' })}>
      添加成员
    </button>
  {/snippet}
</FieldArray>

团队成员管理

表单数据

{
  "teamName": "",
  "members": [
    {
      "name": "",
      "email": "",
      "role": "developer"
    }
  ]
}