aeria-form

This component is used to render a form that will shape the value of the variable passed to modelValue. Forms can either be generated from a schema or composed using slots.

Example

The code below will update the state of the formData variable and shape it according to the form passed to the property prop.

Name

Roles

customer

manager

supervisor

Result

{ "name": "", "roles": [] }

<script setup lang="ts">
const formData = reactive({
  name: '',
  roles: [],
})
</script>

<template>
  <aeria-form
    v-model="formData"
    :property="{
      type: 'object',
      properties: {
        name: {
          description: 'Name',
          type: 'string',
          icon: 'user',
        },
        roles: {
          description: 'Roles',
          type: 'array',
          items: {
            enum: [
              'customer',
              'manager',
              'supervisor',
            ]
          },
          uniqueItems: true,
        },
      }
    }"
  ></aeria-form>

  <pre>{{ formData }}</pre>
</template>

Props

• modelValue Record<string, any>?: The model value of this component will be an object matching the properties passed in the form prop.

• form Record<string, CollectionProperty>?: This prop expects the form properties to be rendered. The properties of a collection can be constructed with store.properties or store.$actions.useProperties(). You can also pass the properties like this:

<aeria-form
  v-model="person"
  :form="{
    name: {
      type: 'string'
    },
    age: {
      type: 'number',
      minimum: 0,
      maximum: 100
    }
  }"
></aeria-form>

• collection string?: The name of the target collection. This property is needed whenever one of the properties passed in the form prop is a reference. Omitting this prop while having a reference property will cause a console warning to be shown.