Introducing KickStart — AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free
FormKit输入与HTML输入类似,但增加了许多必要的功能,如标签、帮助文本、验证和错误消息(以及更多)。类似于HTML的<input>
标签使用各种type
属性(即,<input type="text">
vs <input type="checkbox">
),FormKit对所有输入使用type
属性。事实上,使用FormKit,你只需要学习一个组件:
FormKit输入并不局限于"原生"HTML中可用的内容。我们单独的FormKit Pro包提供了对"合成"输入类型的访问,如repeater
、autocomplete
、mask
、rating
等。当然,你也可以通过创建自定义输入来编写你自己的输入。
虽然你可以自由地使用FormKit输入,但你通常会希望将它们组合成一个表单:
<FormKit type="form">
<!-- ... 你的表单输入 -->
</FormKit>
表单类型提供了许多功能,包括值收集、初始值设置、表单提交、错误处理、加载状态等。
有4种方法可以设置输入的值:
value
属性(注意:只设置初始值)。v-model
。node.input()
方法。FormKit
组件的值。value
属性你可以使用value
属性设置单个输入或一组输入的初始值。
value
属性应仅用于设置输入的初始值。组件创建后,它将不会对更改做出反应。
v-model
使用v-model
可以实现与任何FormKit输入的双向反应性数据绑定。
node.input()
每个FormKit输入的核心都是FormKit的node
对象的一个实例,使用node.input()
方法是修改任何输入值的最有效机制(阅读更多关于获取节点对象实例的信息)。
对node.input()
的调用是防抖的,因此是异步的(使用delay
属性来改变防抖的长度)。你可以await node.input(val)
来确定输入何时已经稳定。
像 list
,group
和 form
这样的父级输入也能直接设置其任何子级的值。实际上,父级的值就是其子级的聚合值。您可以使用上述任何方法(value
prop,v-model
,或 node.input()
)来设置子级的值。
在几乎所有情况下,设置在 <FormKit>
组件上的属性将被传递到组件核心的实际 <input>
元素,而不是任何包装的 DOM 元素。例如:
我们在其自己的文档页面上更详细地讨论了验证 —— 但足以说明在 FormKit 中向输入添加验证规则就像添加 validation
prop 一样简单:
出于性能考虑,所有 FormKit 输入都支持防抖作为一项一流的功能。虽然输入的值在每次按键(技术上是 input
事件)时都会改变,但这个新更新的值只是在内部设置 —— 验证规则,组,列表,表单和(大多数)插件还没有“意识到”已经做出了改变。
在内部,FormKit 对 input
事件进行防抖。当防抖“稳定”时,新值被“提交”,然后通过 输入节点的 commit
事件 通知应用程序的其余部分。默认的防抖延迟是 20 毫秒,可以通过 delay
prop 或配置选项进行调整。
为了说明这一点,让我们从 #default
插槽 prop 获取 group
的 value
,并观察它是如何在我们的 1000ms delay
之后才更新的:
延迟 prop 的默认值是 20
毫秒。然而,group
和 list
输入默认使用 0
毫秒,以防止防抖延迟在每个深度级别“累积”。
验证错误不是设置输入错误的唯一方式。您还可以通过使用 errors
prop 在输入上显式设置错误消息。
显式设置的错误是非阻塞的,意味着它们不会像验证错误那样阻止表单提交。您可以在 表单文档 上阅读更多关于错误处理的信息。