Accessing the form context

There are two function to access the form context, faviform and useForm.

• faviform: Which is the function to create a form context and return the form store.
• useForm: With this function you can access the form store in a component.

Example

Create a form

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

  const form = faviform<Data>({
    // ...config
  });
  const { ...methodsAndStores } = form;
</script>

Use the form

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

  const form = faviform<Data>();
  const { ...methodsAndStores } = form;
</script>

Store

The form store is a readable store that contains the following stores and methods.

• data: The values of the form.
• errors: The errors of each field.
• loading: Loading state of the form.
• styles: Contains the custom classnames of the form.
• setField: Modify the value of a field.
• setError: Change the error of a field.
• check: An event to validate a field in a custom component.
• submit: Submit the form.
• reset: Reset the form.