Usage

This library provides a set of components that can be used to build forms. Or if you prefer, you can build your own components. You must use any of these components inside the form context.

Schema

The schema is an object that contains all fields of the form. Each field must have a regular expression or a “primitive type” as value. The key of each field is the name of the field.

Tip

Here is a full explanation of how schema works.

TS

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

  const schema = {
    name: /^[a-zA-Z]+$/,
    message: "string",
    accept: {
      type: "boolean",
      required: true,
    },
  } satisfies FieldsSchema;

  // ... faivform function
</script>

JS

<script>
  const schema = {
    name: /^[a-zA-Z]+$/,
    message: "string",
    accept: {
      type: "boolean",
      required: true,
    },
  };

  // ... faivform function
</script>

The faivform function

Here is where the context form is created. You must use the faivform function to create a form.

This function receives a configuration object with a fields property, which is an object that receives the schema of the form. You can also pass an Adapter function instead of the schema.

Tip

You can check the FaivFormConfig and FaivFormStore interfaces to know more about the configuration object and the store.

Important

All components must be inside the form context. Otherwise, they won’t work. This includes your own components.

<script lang="ts"> // or remove lang="ts" if you are using JS
  import { faivform } from '@tuentyfaiv/svelte-form';

  const form = faivform({
    fields: // Schema | Adapter
  });

  const {
    data,
    loading,
    errors,
    styles,
    setField,
    setError,
    check,
    submit,
    reset
  } = $form;

  // ... rest of the code
</script>

<!-- Here you can use the `Field` component inside a form element -->

Submitting a form

To submit a form, you must use the submit function and pass it to the on:submit event of the form.

Note

Don’t forget to add the preventDefault modifier to the on:submit event.

<script lang="ts"> // or remove lang="ts" if you are using JS
  // ... faivform function

  const onSubmit = $form.submit(async (values) => {
    // Do something with the values
  });
</script>

<form on:submit|preventDefault={onSubmit}>
  <!-- ... Built-in components or your own components -->
</form>

Built-in components

You can use the built-in components to build your forms easily. Here is an example using the Field component.

Important

Each component must have a name prop that matches with a field of the form.

// ... faivform function

<form on:submit|preventDefault>
  <Field name="name" label="Name:" />
  <Field name="message" label="Leave a message:" type="textarea" />
  <Field name="accept" label="Accept terms:" type="checkbox" />
  <button type="submit">
    Submit
  </button>
</form>

Example

Try it

This is an interactive example of the code used above.

      
Schema
      {
  "name": "^[a-zA-Z]+$",
  "message": "string",
  "accept": {
    "type": "boolean",
    "required": true
  }
}
    

      
Data
      {
  "name": null,
  "message": null,
  "accept": false
}
    

      
Errors
      {
  "name": null,
  "message": null,
  "accept": null
}
    

Name: Leave a message: Accept terms: Submit