Repeater

• 基本示例
• 架构示例
• 添加按钮属性
• 最小/最大值
• 空状态
• 控件
• 自定义控件
• 设置错误
• Props & Attributes
• 章节
• 无障碍性
  • 键盘交互

基本示例

repeater 输入用于重复一组输入。你可以在 repeater 中使用任意数量的 FormKit 输入，且 repeater 本身可以无限嵌套。

默认情况下，repeater 输入具有移动、添加和移除项目的能力：

与大多数其他 FormKit 输入类型不同，repeater 输入的类型是 list。你可以看到上面的 users 属性（我们 repeater 的值）是一个数组。

架构示例

像所有其他 FormKit 输入一样，Repeater 能够在 FormKit schema 编写的表单中使用。

添加按钮属性

在前面的示例中，默认提供了“添加用户”按钮，按钮标签来自 repeater 的 label。我们可以通过使用 add-button 属性并将其设置为 string 来自定义标签，或者通过将其设置为 false 来完全移除它。或者，类似于 FormKit 表单 上的 submit-attrs 属性，我们可以提供一个属性对象应用于按钮，使用 add-attrs。在这个示例中，我们使用 add-label 属性将 repeater 的标签从 Add Users 更改为 My custom label：

最小/最大值

像许多其他 FormKit 输入一样，repeater 附带有 min 和 max 属性。你可以使用这些属性来限制添加或移除的项目数量。

空状态

当 repeater 允许为空，通过将其 min 属性设置为 0 并且没有值时，你可以使用 empty 插槽控制在空状态下渲染的内容。

控件

repeater 输入默认带有一组控件，允许你移动、添加和移除项目。你可以通过将 upControl、downControl、insertControl 和 removeControl 属性设置为 true 或 false 来控制这些控件的可见性。

自定义控件

使用 FormKit 的重复器，你不受限于我们的默认控件。你可以以任何你想要的方式操作重复器：

设置错误

你可以使用点表示法在重复器或任何可重复项上设置错误。这里我们使用的是 setErrors 辅助函数，但还有其他方法：

// setErrors 的第二个参数是输入级别的错误
formNode.setErrors( null, // 没有表单错误，
  {
    // 重复器字段上的错误：
    'teamMembers': ['你的一个团队成员出现问题。']

    // 特定重复器项上的错误：
    'teamMembers.1.email': ['[email protected] 已经在一个团队中。'],
  }
)

记住，你的提交处理函数会传递表单的核心 node，可以方便地在深度上设置错误。阅读更多关于错误处理的信息 这里。这是一个假后端返回重复器和一个子项错误的示例：

Props & Attributes

章节

您可以通过使用该部分的"key"来定位输入的特定部分，从而可以修改该部分的类、HTML（通过:sections-schema）或内容（通过插槽)）。了解更多关于部分的信息，请点击这里。

无障碍性

所有 FormKit 输入都是考虑到以下无障碍性因素而设计的。通过在此处提交无障碍性问题，帮助我们不断提高所有人的无障碍性：

键盘交互