如何从已实现的FormKit表单中获取表单Schema？

我刚开始使用FormKit，从零构建表单Schema时遇到了困难。希望通过代码中已定义的测试表单获取对应的Schema，以此理解其定义方式，完成测试后将正式Schema存入数据库，用于通过Schema生成表单。以下是我编写的FormKit表单代码：

<script setup>
    import '@formkit/themes/genesis'

    const createUser = async (fields) => {
        await new Promise((r) => setTimeout(r, 1000))
        alert(JSON.stringify(fields))
        console.log(fields)
    }
</script>

<template>
    <div><h2>My first form</h2></div>
    <div class="container">
        <div class="row">
            <FormKit type="form" @submit="createUser" submit-label="Salva utente">
                <div class="col-12">
                    <FormKit type="text" name="nome" id="nome" label="Nome" help="Inserisci il tuo nome di battesimo" placeholder="Mario" />
                </div>
                <div class="col-12">
                    <FormKit type="text" name="cognome" id="cognome" label="Cognome" help="Inserisci il tuo cognome" placeholder="Rossi" />
                </div>
                <div class="col-12">
                    <FormKit
                        type="select"
                        label="What planet is the largest?"
                        placeholder="Select a planet"
                        name="planet"
                        :options="{
                            mercury: 'Mercury',
                            venus: 'Venus',
                            earth: 'Earth',
                            mars: 'Mars',
                            jupiter: 'Jupiter',
                            saturn: 'Saturn',
                            uranus: 'Uranus',
                            neptune: 'Neptune',
                        }"
                        validation="required|is:jupiter"
                        validation-visibility="dirty"
                        :validation-messages="{
                            is: 'Nope! Jupiter is the largest planet',
                        }"
                    />
                </div>
            </FormKit>
        </div>
    </div>
    
</template>

请问是否有可行的获取方法？

可行的提取方案 #

1. 手动映射生成Schema #

FormKit的Schema本质是JSON结构，你可以直接对照模板里的FormKit组件属性，手动转换成符合规范的Schema。针对你的表单，对应的完整Schema如下：

{
  "type": "form",
  "submitLabel": "Salva utente",
  "onSubmit": "$event => createUser($event)",
  "children": [
    {
      "type": "text",
      "name": "nome",
      "id": "nome",
      "label": "Nome",
      "help": "Inserisci il tuo nome di battesimo",
      "placeholder": "Mario",
      "wrapper": {
        "class": "col-12"
      }
    },
    {
      "type": "text",
      "name": "cognome",
      "id": "cognome",
      "label": "Cognome",
      "help": "Inserisci il tuo cognome",
      "placeholder": "Rossi",
      "wrapper": {
        "class": "col-12"
      }
    },
    {
      "type": "select",
      "label": "What planet is the largest?",
      "placeholder": "Select a planet",
      "name": "planet",
      "options": {
        "mercury": "Mercury",
        "venus": "Venus",
        "earth": "Earth",
        "mars": "Mars",
        "jupiter": "Jupiter",
        "saturn": "Saturn",
        "uranus": "Uranus",
        "neptune": "Neptune"
      },
      "validation": "required|is:jupiter",
      "validationVisibility": "dirty",
      "validationMessages": {
        "is": "Nope! Jupiter is the largest planet"
      },
      "wrapper": {
        "class": "col-12"
      }
    }
  ]
}

2. 通过FormKit实例提取配置 #

你可以通过获取表单的实例，直接提取内部的配置信息，步骤如下：

• 给根FormKit组件添加ref：

<FormKit ref="formRef" type="form" @submit="createUser" submit-label="Salva utente">
  <!-- 子组件保持不变 -->
</FormKit>

• 在<script setup>中添加挂载后的提取逻辑：

import { onMounted, ref } from 'vue'

const formRef = ref(null)

onMounted(() => {
  const formNode = formRef.value.node
  // 筛选需要的字段生成Schema，可根据需求调整
  const extractedSchema = {
    type: formNode.type,
    submitLabel: formNode.props.submitLabel,
    children: formNode.children.map(child => ({
      type: child.type,
      name: child.name,
      label: child.props.label,
      help: child.props.help,
      placeholder: child.props.placeholder,
      options: child.props.options,
      validation: child.props.validation,
      validationVisibility: child.props.validationVisibility,
      validationMessages: child.props.validationMessages
    }))
  }
  console.log('提取的Schema:', extractedSchema)
})

这种方法会获取FormKit内部的所有属性，你需要根据数据库存储需求过滤掉无关字段。

3. 利用FormKit核心工具转换 #

FormKit的@formkit/core包提供了Schema解析工具，如果你需要在代码层面处理转换，可以使用parseSchema函数：

import { parseSchema } from '@formkit/core'

// 可以将手动编写的Schema字符串解析为FormKit可用的结构
const schemaString = JSON.stringify({
  type: "form",
  submitLabel: "Salva utente",
  children: [/* ...子组件配置... */]
})
const schema = parseSchema(schemaString)

对于已写好的模板，前两种方法会更直接高效。

内容的提问来源于stack exchange，提问作者agodoo