Formula Options

Formula is zero-configuration - Out-of-the-box - using standard HTML5 validation properties to build up its validation rules - however it is also possible to pass custom validation rules via the formula() options object.

`defaultValues`#

The defaultValues option allows an initial set of values to be passed to the form.

Form values can also be set with defaults using <input bind:value={myValue}>, if no value it set it will fall back to this value. If there is no default value, then it will be an empty string or array value.

<script>
  import { formula } from 'svelte-formula';

  const { form } = formula({
    defaultValues: {
      content: 'Hello World!'
    }
  })
</script>

<div use:form>
  <textarea name='content'></textarea>
</div>

`enrich`#

The enrich object is used to pass methods to the Formula instance that allow the generation of computed values for current form values - these are added at the field level, and each field can have multiple. All the calculated values are available via the enrichment store.

<script>
  import { formula } from 'svelte-formula';

  const { form, enrichment } = formula({
    enrich: {
      content: {
        contentLength: (value) => value.length
      }
    }
  })
</script>

<div use:form>
  <textarea name='content'></textarea>
  <span>Length ${$enrichment?.content?.contentLength}</span>
</div>

`messages`#

Used for localisation and custom messages, this is a Object containing a key that is the field name to apply the messages to. The value is another Object that contains the key for each error (e.g. valueMissing) and the value is the replacement string.

<script>
  import { formula } from 'svelte-formula';

  const { form, validity } = formula({
    messages: {
      username: {
        valueMissing: 'This service requires you enter a username'
      }
    },
  })
</script>

`validators`#

An Object containing a key that is the field name to apply the validation to, the value is another object that contains each named validation function. The result are made available in the validity store.

<script>
  import { formula } from 'svelte-formula';

  const { form, validity } = formula({
    validators: {
      content: {
        username: (value) => value.includes('@svelte.codes') ? null : 'Your username must be in the domain @svelte.codes'
      }
    }
  })
</script>

`formValidators`#

An Object containing a key that is the name of the validation rule, and the function that returns the validation result. The results are available in the formValidity store

<script>
  import { formula } from 'svelte-formula';
  const { form, validity, formValidity } = formula({
    formValidators: {
      // With form validators you can compare values
      passwordsMatch: (values) => values.password === values.passwordMatch ? null : 'Your passwords must match',
      // Or check conditions between values across the form
      didTickConfirm: (values) => Boolean(values.createAccount) && Boolean(values.agreeTandCs) ? null : 'You must agree to Terms & Conditions before creating an account'
    }
  });
</script>

<div class:error={$formValidity?.passwordsMatch} hidden={$formValidity?.passwordsMatch}>
  {$formValidity?.passwordsMatch}
</div>

`preChanges`#

A Function that is called before any values are read from the DOM changes and the store updates. This can be used to carry out additional changes to the form.

<script>
  import { formula } from 'svelte-formula';
  
  let timeStamp = Date.now();

  const { form } = formula({
    preChanges: () => timeStamp = Date.now()
  })
</script>

<input type="hidden" name="timestamp" value={timeStamp} />

`postChanges`#

A Function that is called after all the values have been read and stores updated. This function receives the latest values and is functionaly the same as subscribing to the form.formValues store.

<script>
  import { formula } from 'svelte-formula';
  
  const { form } = formula({
    postChanges: (values) => console.log('Current Values', values)
  })
</script>

defaultValues#

enrich#

messages#

validators#

formValidators#

preChanges#

postChanges#