form-builder

Appearance

useJsonForm ​

Creates a Formisch form for a definition, with its schema and initial input from the builder, and the state <JsonFields> renders.

ts
const jsonForm = useJsonForm(definition, options)
const jsonForm = useJsonForm<TInput, TOutput>(definition, options)

Generics ​

  • TInput extends object
  • TOutput extends object

Parameters ​

Explanation ​

A definition with issues throws the builder's DefinitionError, so run validate() first when it comes from outside your code. The definition is read once, when the component sets up: give the component a new :key to use another one.

With conditions, it clears the fields they clear as soon as they do, with Formisch's setInput, wherever the fields are rendered. With your input type, and your output type when it differs, the form is typed, so Formisch checks paths and values. See TypeScript.

Returns ​

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 './fields'

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

const jsonForm = useJsonForm(definition, { components })

function save(output: unknown) {
  // { email: 'jane@example.com', password: 'correct horse', newsletter: true }
  console.log(output)
}
</script>

<template>
  <Form :of="jsonForm.form" @submit="save">
    <JsonFields :of="jsonForm" />
    <button type="submit">Sign up</button>
  </Form>
</template>

Guides ​

Components ​