Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface FormupContext<Values, State>

Provides to all form properties.

Type parameters

  • Values

  • State

Hierarchy

  • FormupContext

Index

Properties

Properties

autocomplete

autocomplete: string

Sets the autocomplete on the form.

classes

classes: ValidityCSSClasses

The used CSS class overrides.

debounce

debounce: number

Timeout in milliseconds after which a validation should start.

dirty

dirty: Readable<ReadonlySet<string>>

The dirty fields by path as a svelte store.

This allows to show errors conditionally if the user has already visited that field.

{#if $dirty.has(email) && $errors.has(email)} $dirty.get(email).message {/if}

dirtyOn

dirtyOn: keyof EventName[]

Which events should mark a field as dirty.

errors

errors: Readable<ReadonlyMap<string, ValidationError>>

The form errors keyed by field path as a svelte store.

If a validate function is provided to a field, then when it is called this map will be modified.

{#if $errors.has(email)} $errors.get(email).message {/if}

formError

formError: Readable<ValidationError | undefined>

Whole form error, not associated with any field

invalid

invalid: Readable<ReadonlyMap<string, ValidationError>>

The invalid, meaning dirty and not validating and error, fields by path as a svelte store.

{#if $invalid.has(email)} $invalid.get(email).message {/if}

isDirty

isDirty: Readable<boolean>

Boolean that is true when pristine is false

When this becames true the {@link ValidityCSSClasses.dirty} CSS class is added to the form.

isError

isError: Readable<boolean>

Determines if the whole form is valid.

When this becames true the {@link ValidityCSSClasses.valid} CSS class is added to the form.

isPristine

isPristine: Readable<boolean>

Boolean that is true when form is pristine.

A form is pristine when it has not been touched && no values have been entered in any field.

When this becames true the {@link ValidityCSSClasses.pristine} CSS class is added to the form.

isSubmitted

isSubmitted: Readable<boolean>

Determins if the form has been succesfully submitted.

When this becames true the {@link ValidityCSSClasses.submitted} CSS class is added to the form.

isSubmitting

isSubmitting: Readable<boolean>

Determines if the form is submitting (most likely because of a submit).

When this becames true the {@link ValidityCSSClasses.submitting} CSS class is added to the form.

isValidating

isValidating: Readable<boolean>

Determines if the whole form is validating (most likely because of a submit).

This does not reflect individual field validation triggered by validateAt.

When this becames true the {@link ValidityCSSClasses.validating} CSS class is added to the form.

reset

reset: (event?: Event) => void

Function that will reset the form to its initial state.

This will abort all active field validation, reset all stores and call FormupOptions.onReset.

This may have no effect (eg is ignored) if there is an active submit.

Type declaration

    • (event?: Event): void

    • Parameters

      • Optional event: Event

      Returns void

schema

schema: FormupSchema<Values, State>

A yup like schema to perform validation.

setDirtyAt

setDirtyAt: (path: string, dirty?: undefined | false | true) => void

Set the dirty state of a field imperatively.

param

should match the key of dirty you wish to update. Useful for creating custom input handlers.

param

to set; falsey means deleting the path from the store.

Type declaration

    • (path: string, dirty?: undefined | false | true): void

    • Parameters

      • path: string
      • Optional dirty: undefined | false | true

      Returns void

setErrorAt

setErrorAt: (path: string, error?: ValidationError | undefined | null | false) => void

Set the error message of a field imperatively.

param

should match the key of errors you wish to update. Useful for creating custom input error handlers.

param

to set; falsey means deleting the path from the store.

Type declaration

    • Parameters

      Returns void

setFormError

setFormError: (error?: ValidationError | undefined | null | false) => void

Set the form error manually.

If error is falsey means deleting the path from the store.

param

to set

Type declaration

setValidatingAt

setValidatingAt: (path: string, validating?: undefined | false | true) => void

Set the validating state of a field imperatively.

param

should match the key of validating you wish to update. Useful for creating custom input handlers.

param

to set; falsey means deleting the path from the store.

Type declaration

    • (path: string, validating?: undefined | false | true): void

    • Parameters

      • path: string
      • Optional validating: undefined | false | true

      Returns void

state

state: Writable<State>

A top-level status object that you can use to represent form state that can't otherwise be expressed/stored with other methods.

This is useful for capturing and passing through API responses to your inner component.

submit

submit: (event?: Event) => Promise<void>

This function will submit the form and trigger some lifecycle events.

  1. abort all active field validation
  2. call FormupSchema.validate.
  3. call FormupOptions.onSubmit if the form is valid.
remarks

This function can be called manually however it is also called if you have a <button type='submit'> within the <form>.

remarks

Repeated invocation while there is an active submit have no effect (eg are ignored).

Type declaration

    • (event?: Event): Promise<void>

    • Parameters

      • Optional event: Event

      Returns Promise<void>

submitCount

submitCount: Readable<number>

Number of times the form was submitted.

Resetted to zero after a succesful FormupContext.submit or a FormupContext.reset.

valid

valid: Readable<ReadonlySet<string>>

The valid, meaning dirty and not validating and no error, fields by path as a svelte store.

validate

validate: SvelteAction<undefined | string | ValidateActionOptions>

A svelte action to validate the element and all its form children it is applied to.

<script>
  import { formup } from 'svelte-formup'

  const { validate } = formup(options)
</script>

<form use:validate>
  <!-- .... --->

  <input use:validate={{ on: 'input' }}>

  <!-- .... --->
</form>
remarks

The FormupContext.validity action is applied automatically on that node.

validateAt

validateAt: (path: string, options?: ValidateAtOptions) => void

Imperatively call field's validate function if specified for given field.

Type declaration

validateOn

validateOn: keyof EventName[]

Which events should trigger a validation.

validating

validating: Readable<ReadonlySet<string>>

The currently validating fields by path as a svelte store.

This allows to show a spinner if a field is validated.

{#if $validating.has(email)}<Spinner />{/if}

validity

validity: SvelteAction<undefined | string | ValiditiyActionOptions>

A svelte action to update the validity state of the element and all its form children it is applied to.

That means updating setCustomValidity, aria-invalid and the ValidityCSSClasses.

<script>
  import { formup } from 'svelte-formup'

  const { validate, validity } = formup(options)
</script>

<form use:validate>
  <fieldset use:validity>
    <!-- .... --->
  </fieldset>
</form>

values

values: Writable<Partial<NonNullable<Values>>>

The form values as a svelte store.

<input id="email" bind:value="{$values.email}" />

Generated using TypeDoc