form-builder

Appearance

JsonFormSteps ​

The steps of a form, from its layout. A form without steps in its layout has one.

Definition ​

  • JsonFormSteps
    • list readonly LayoutStep[]: the steps on show. A hidden step is left out, unless it is the current one
    • index number: the index of the current step in list
    • current LayoutStep: the step <JsonFields> renders
    • isFirst boolean
    • isLast boolean
    • next () => Promise<boolean>: validates, and moves on when the step's fields have no issues. Resolves to whether it moved
    • back () => void: moves back, without validating
    • goTo (index: number) => Promise<boolean>: moves back freely, or forward through each step on the way, stopping at the first with issues

Explanation ​

See multi-step forms for how the steps validate.

Example ​

vue
<script setup lang="ts">
import { Form } from '@formisch/vue'
import type { JsonForm } from '@whatsaaaa/form-builder-schema'
import { JsonFields, useJsonForm } from '@whatsaaaa/form-builder-vue'
import { components } from './all-fields'
import LayoutRow from './LayoutRow.vue'

const { definition } = defineProps<{ definition: JsonForm }>()

const jsonForm = useJsonForm(definition, {
  components,
  layoutComponents: { row: LayoutRow },
})

function save(output: unknown) {
  console.log(output)
}
</script>

<template>
  <Form :of="jsonForm.form" @submit="save">
    <ol>
      <li
        v-for="(step, index) in jsonForm.steps.list"
        :key="step.step.id ?? index"
        :aria-current="index === jsonForm.steps.index ? 'step' : undefined"
      >
        {{ step.step.label }}
      </li>
    </ol>
    <JsonFields :of="jsonForm" />
    <button
      v-if="!jsonForm.steps.isFirst"
      type="button"
      @click="jsonForm.steps.back()"
    >
      Back
    </button>
    <button
      v-if="!jsonForm.steps.isLast"
      type="button"
      @click="jsonForm.steps.next()"
    >
      Next
    </button>
    <button v-else type="submit">Sign up</button>
  </Form>
</template>

Types ​