---
title: "Methods"
description: "Read and change form state from code. Every Formisch method is auto-imported."
canonical_url: "https://nuxt-formisch.onmax.me/forms/methods"
---
# Methods

> Read and change form state from code. Every Formisch method is auto-imported.

Formisch keeps its API small by putting actions in plain functions instead of on the store. Each one takes the form store first and, when it needs one, a config object second:

```ts
getInput(form, { path: ['email'] })
setInput(form, { path: ['email'], input: 'ada@example.com' })
reset(form, { initialInput: { email: '', password: '' } })
move(form, { path: ['todos'], from: 0, to: 2 })
```

Reads are reactive, so `getInput(form)` inside a `computed` or a template updates with the form. Leave out `path` to act on the whole form.

## Read

<table>
<thead>
  <tr>
    <th>
      Method
    </th>
    
    <th>
      Returns
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        getInput
      </code>
    </td>
    
    <td>
      The current input of a field or the form.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        getErrors
      </code>
    </td>
    
    <td>
      The errors of one field, or of the root object.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        getDeepError
      </code>
    </td>
    
    <td>
      The first error within a field or the form.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        getDeepErrors
      </code>
    </td>
    
    <td>
      Every error within a field or the form.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        getDeepErrorEntry
      </code>
      
       / <code>
        getDeepErrorEntries
      </code>
    </td>
    
    <td>
      The first / every error, paired with its field path.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        isTouched
      </code>
      
      , <code>
        isEdited
      </code>
      
      , <code>
        isDirty
      </code>
      
      , <code>
        isValid
      </code>
    </td>
    
    <td>
      That state for one field, or for the whole form.
    </td>
  </tr>
</tbody>
</table>

## Dirty input

<table>
<thead>
  <tr>
    <th>
      Method
    </th>
    
    <th>
      Returns
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        getDirtyInput
      </code>
    </td>
    
    <td>
      Only the parts of the input that differ from the initial input. Handy for <code>
        PATCH
      </code>
      
       requests.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        getDirtyPaths
      </code>
    </td>
    
    <td>
      The paths of the dirty fields.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pickDirty
      </code>
    </td>
    
    <td>
      The dirty parts of another value, such as the validated output: <code>
        pickDirty(form, { from: output })
      </code>
      
      .
    </td>
  </tr>
</tbody>
</table>

## Write

<table>
<thead>
  <tr>
    <th>
      Method
    </th>
    
    <th>
      Does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        setInput
      </code>
    </td>
    
    <td>
      Sets the input of a field or the form.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        setErrors
      </code>
    </td>
    
    <td>
      Sets or clears (<code>
        null
      </code>
      
      ) the errors of a field, for example from a server response.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        reset
      </code>
    </td>
    
    <td>
      Resets a field or the form. Pass <code>
        initialInput
      </code>
      
       to load new data, such as a fresh API response.
    </td>
  </tr>
</tbody>
</table>

Prefer `reset` with a new `initialInput` over `setInput` when the source data changed: it updates the baseline that `isDirty` compares against.

## Control

<table>
<thead>
  <tr>
    <th>
      Method
    </th>
    
    <th>
      Does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        validate
      </code>
    </td>
    
    <td>
      Validates the form and returns Valibot's result. <code>
        { shouldFocus: true }
      </code>
      
       focuses the first invalid field.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        submit
      </code>
    </td>
    
    <td>
      Submits the <code>
        <FForm>
      </code>
      
       from outside it, through <code>
        requestSubmit()
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        handleSubmit
      </code>
    </td>
    
    <td>
      Wraps a handler so it validates first. Use it when you can't render a <code>
        <form>
      </code>
      
      , for example inside another form.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        focus
      </code>
    </td>
    
    <td>
      Focuses a field's element.
    </td>
  </tr>
</tbody>
</table>

```vue
<script setup lang="ts">
const form = useForm({ schema: LoginSchema })
const save = handleSubmit(form, values => $fetch('/api/login', { method: 'POST', body: values }))
</script>

<template>
  <!-- fields bound to `form`, no <FForm> -->
  <UButton :loading="form.isSubmitting" @click="save">Save</UButton>
</template>
```

## Arrays

<table>
<thead>
  <tr>
    <th>
      Method
    </th>
    
    <th>
      Config
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        insert
      </code>
    </td>
    
    <td>
      <code>
        { path, at?, initialInput? }
      </code>
      
      . Appends when <code>
        at
      </code>
      
       is left out.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        remove
      </code>
    </td>
    
    <td>
      <code>
        { path, at }
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        move
      </code>
    </td>
    
    <td>
      <code>
        { path, from, to }
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        swap
      </code>
    </td>
    
    <td>
      <code>
        { path, at, and }
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        replace
      </code>
    </td>
    
    <td>
      <code>
        { path, at, initialInput? }
      </code>
    </td>
  </tr>
</tbody>
</table>

See [useFieldArray](https://nuxt-formisch.onmax.me/forms/composables#usefieldarray) for a full list example. Each method is documented in detail in the [Formisch API reference](https://formisch.dev/vue/api/).


## Sitemap

See the full [sitemap](https://nuxt-formisch.onmax.me/sitemap.md) for all pages.