form-builder

Appearance

JsonField ​

Renders one field of a useJsonForm form, wherever you put it inside Formisch's <Form>.

ts
<JsonField :of="jsonForm" path="coupon" />

Parameters ​

  • of AnyJsonFormInstance: what useJsonForm returned
  • path string: the field's dot path, like 'address.city'
  • components FieldComponents: optional, defaults to those useJsonForm got

Explanation ​

A group or a list comes with its fields. Leave the field out of <JsonFields> with except, so it renders once. It renders nothing while conditions hide the field. A path that names no field, or a field of a list's items, throws a TypeError.

Example ​

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

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

const jsonForm = useJsonForm(definition, { components })

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

<template>
  <Form :of="jsonForm.form" @submit="save">
    <main>
      <JsonFields :of="jsonForm" :except="['coupon', 'acceptTerms']" />
    </main>
    <aside>
      <JsonField :of="jsonForm" path="coupon" />
      <JsonField :of="jsonForm" path="acceptTerms" />
      <button type="submit">Place order</button>
    </aside>
  </Form>
</template>

Guides ​

Components ​