Overview

Form component streamlines form handling and validation by utilizing the powerful felte library. It exports key form-related variables, sets up the form instance as context, and allows for easy management of form data and events.

Usage

Below is code snippet on how the componenet is created.

<script lang="ts">
  import { createForm } from "felte"
  import { createEventDispatcher, setContext } from "svelte"
  import { key } from "./form"

  export let schema = []
  export let validate = values => { return {} }
  export let transform = values => values
  export let initialValues = {}
  export let validators = []
  export const updateWith = (newData) => {
    Object.keys(newData)
      .forEach(k => {
        setFields(k, newData[k])
      })
  }

  let dispatch = createEventDispatcher()

  let a = {...initialValues}

  const formInfo = createForm({
    onSubmit: (values, context) => {
      dispatch("submit", {values, context})
    },
    validate: validate,
    extend: [...validators],
    transform: transform,
    initialValues: initialValues})

  setContext(key, formInfo)

  const {form, data, setData, setFields } = formInfo

  $: dispatch("change", {values: $data, form: formInfo})
  setTimeout(() => dispatch("ready", formInfo), 0)

  $: window["formInfo"] = formInfo

</script>

<form use:form>
  <slot></slot>
</form>

// form
export const key = {}