Errors

You can use the Errors component to display the errors of the form.

Usage

<script lang="ts">
  import { Errors } from "@tuentyfaiv/svelte-form";
</script>

<Errors />
<!-- Or -->
<Errors let:field let:error>
  Custom error message for
  {field}: {formatError(error)}
</Errors>

Props

Prop	Type	Default	Description
context	string	”form”	The context of the form.
id	string | undefined | null	null	The id of list errors.
styles	ErrorStyles	{}	The styles of the errors.

Slots

Slot	Prop	Description	Available to
default	{ error: string | null; field: string; }	Show an error message for each field.	all

Events

This component has no events.

Example

Username: Email:

Drag and drop a file here, or click to select a file to upload.

Details: Permissions:

• Read
• Write
• Delete

Categories:

News Sports Technology Entertainment Lifestyle

Code

<script lang="ts">
  import {
    Field,
    Select,
    File,
    Option,
    Errors,
    faivform,
  } from "@tuentyfaiv/svelte-form";

  import type {
    FieldsSchema,
    OptionItem,
    SelectOption,
  } from "@tuentyfaiv/svelte-form";

  const schema = {
    username: {
      type: "string",
      required: true,
    },
    email: {
      type: "string",
      required: true,
    },
    avatar: "file",
    details: {
      type: "string",
      required: true,
      max: 500,
    },
    permissions: {
      type: "array",
      required: true,
      min: 2,
      item: {
        type: "string",
        required: true,
      },
    },
    categories: {
      type: "array",
      required: true,
      min: 3,
      item: {
        type: "string",
        required: true,
      },
    },
  } satisfies FieldsSchema;

  faivform({ fields: schema });

  const permissions: SelectOption[] = [
    { value: "read", label: "Read" },
    { value: "write", label: "Write" },
    { value: "delete", label: "Delete" },
  ];

  const categories: OptionItem[] = [
    { value: "news", label: "News" },
    { value: "sports", label: "Sports" },
    { value: "technology", label: "Technology" },
    { value: "entertainment", label: "Entertainment" },
    { value: "lifestyle", label: "Lifestyle" },
  ];
</script>

<Field label="Username:" name="username">
  <svelte:fragment slot="error">
    <small>Username is required</small>
  </svelte:fragment>
</Field>

<Field label="Email:" name="email" type="email">
  <svelte:fragment slot="error">
    <small>Email is required</small>
  </svelte:fragment>
</Field>

<File name="avatar">
  <svelte:fragment slot="error">
    <small>Avatar is required</small>
  </svelte:fragment>
</File>

<Field label="Details:" name="details" type="textarea">
  <svelte:fragment slot="error">
    <small>Details is required</small>
  </svelte:fragment>
</Field>

<Select
  label="Permissions:"
  name="permissions"
  options={permissions}
  multiple
>
  <svelte:fragment slot="error">
    <small>Choose at least 2 permission</small>
  </svelte:fragment>
</Select>

<Option
  label="Categories:"
  name="categories"
  options={categories}
  multiple
>
  <svelte:fragment slot="error">
    <small>Choose at least 3 categories</small>
  </svelte:fragment>
</Option>

<Errors />