输入

介绍

FormKit输入与HTML输入类似,但增加了许多必要的功能,如标签、帮助文本、验证和错误消息(以及更多)。类似于HTML的<input>标签使用各种type属性(即,<input type="text"> vs <input type="checkbox">),FormKit对所有输入使用type属性。事实上,使用FormKit,你只需要学习一个组件

加载实时示例

FormKit输入并不局限于"原生"HTML中可用的内容。我们单独的FormKit Pro包提供了对"合成"输入类型的访问,如repeaterautocompletemaskrating等。当然,你也可以通过创建自定义输入来编写你自己的输入。

加载实时示例

表单输入

虽然你可以自由地使用FormKit输入,但你通常会希望将它们组合成一个表单

<FormKit type="form">
  <!-- ... 你的表单输入 -->
</FormKit>

表单类型提供了许多功能,包括值收集、初始值设置、表单提交、错误处理、加载状态等。

设置值

有4种方法可以设置输入的值:

  • 使用value属性(注意:只设置初始值)。
  • 使用v-model
  • 使用FormKit的节点node.input()方法。
  • 设置父FormKit组件的值。

使用value属性

你可以使用value属性设置单个输入或一组输入的初始值。

加载实时示例
warning

value属性应仅用于设置输入的初始值。组件创建后,它将不会对更改做出反应。

使用v-model

使用v-model可以实现与任何FormKit输入的双向反应性数据绑定。

加载实时示例

使用node.input()

每个FormKit输入的核心都是FormKit的node对象的一个实例,使用node.input()方法是修改任何输入值的最有效机制(阅读更多关于获取节点对象实例的信息)。

加载实时示例
tip

node.input()的调用是防抖的,因此是异步的(使用delay属性来改变防抖的长度)。你可以await node.input(val)来确定输入何时已经稳定。

使用父级

listgroupform 这样的父级输入也能直接设置其任何子级的值。实际上,父级的值就是其子级的聚合值。您可以使用上述任何方法(value prop,v-model,或 node.input())来设置子级的值。

加载实时示例

设置属性

在几乎所有情况下,设置在 <FormKit> 组件上的属性将被传递到组件核心的实际 <input> 元素,而不是任何包装的 DOM 元素。例如:

加载实时示例

验证

我们在其自己的文档页面上更详细地讨论了验证 —— 但足以说明在 FormKit 中向输入添加验证规则就像添加 validation prop 一样简单:

加载实时示例
了解更多关于验证规则的信息阅读文档

防抖

出于性能考虑,所有 FormKit 输入都支持防抖作为一项一流的功能。虽然输入的值在每次按键(技术上是 input 事件)时都会改变,但这个新更新的值只是在内部设置 —— 验证规则,组,列表,表单和(大多数)插件还没有“意识到”已经做出了改变。

在内部,FormKit 对 input 事件进行防抖。当防抖“稳定”时,新值被“提交”,然后通过 输入节点的 commit 事件 通知应用程序的其余部分。默认的防抖延迟是 20 毫秒,可以通过 delay prop 或配置选项进行调整。

为了说明这一点,让我们从 #default 插槽 prop 获取 groupvalue,并观察它是如何在我们的 1000ms delay 之后才更新的:

加载实时示例
Group & List delay

延迟 prop 的默认值是 20 毫秒。然而,grouplist 输入默认使用 0 毫秒,以防止防抖延迟在每个深度级别“累积”。

显式错误

验证错误不是设置输入错误的唯一方式。您还可以通过使用 errors prop 在输入上显式设置错误消息。

加载实时示例
Non blocking

显式设置的错误是非阻塞的,意味着它们不会像验证错误那样阻止表单提交。您可以在 表单文档 上阅读更多关于错误处理的信息。