@felte/reporter-svelte (英语)

一个使用自定义 Svelte 组件来报告错误的 Felte 报告器 .

安装

npm install --save @felte/reporter-svelte

# Or, if you use yarn

yarn add @felte/reporter-svelte

如果你在使用 sapper,你可能想要添加这个记者 作为一个 dev 依赖。 你可以通过添加 -D 标记为上面任何命令.

使用量

软件包导出一个报告函数 reporter 和一个 Svelte 组件 ValidationMessage。这些可以同时用于报告错误.

将记者添加到 extend 财产 createForm 配置 .

import { reporter, ValidationMessage } from '@felte/reporter-svelte';

const { form } = createForm({
  // ...
  extend: reporter,
  // ...
});

为了显示一个字段的错误,您需要使用记者的组件. 举个例子

<label for="email">Email:</label>
<input id="email" name="email" aria-describedby="email-validation">
<ValidationMessage for="email" let:messages={messages}>
  {messages?.[0] || ''}
</ValidationMessage>

这个 for 属性是指输入的ID。 这个 messages prop将拥有该字段错误的当前值。 如果您想要显示占位符元素而不是处理 falsy 错误值, 您可以使用 placeholder 插槽 .

<ValidationMessage for="email" let:messages={message}>
  <span>{message?.[0]}</span>
  <span slot="placeholder">Some placeholder text</span>
</ValidationMessage>

警告

这个记者可以帮你展示你的 warning 信息也一样。 如果你想要的话 ValidationMessage 用于显示您需要设置字段的警告的组件 level 向值的道具 warning。默认情况下,此道具的值为 error。 。 。 .

<ValidationMessage level="warning" for="email" let:messages={messages}>
  {messages?.[0] || ''}
</ValidationMessage>