useAutoForm

<script setup lang="ts">
const { afz } = useAutoForm()

const schema = afz.object({
  username: afz.string('用户名不能为空'),
  email: afz.email('请输入有效的邮箱地址'),
  age: afz.number().min(18, '必须年满 18 岁')
})

const formData = ref()
</script>

<template>
  <MAutoForm v-model="formData" :schema="schema" />
</template>

// 简化写法：仅错误消息
afz.string('这个字段是必填的')

// 完整写法：带控件配置
afz.string({
  type: 'textarea',
  label: '个人简介',
  placeholder: '请输入个人简介',
  controlProps: { rows: 4 }
})

<script setup lang="ts">
const { afz } = useAutoForm()

// 创建复杂表单 Schema
const schema = afz.object({
  // 基础信息布局
  $basicLayout: afz.layout({
    component: 'UFormGrid',
    props: { columns: 2 }
  }),
  firstName: afz.string('请输入名字'),
  lastName: afz.string('请输入姓氏'),

  // Email 使用 Zod v4 专用验证
  email: afz.email('请输入有效的邮箱地址'),

  // 使用自定义控件类型
  bio: afz.string({
    type: 'textarea',
    label: '个人简介',
    controlProps: { rows: 4 }
  }),

  // 带密码切换的输入框
  password: afz.string({
    type: 'withPasswordToggle',
    label: '密码',
    placeholder: '请输入密码'
  }).min(8, '密码至少 8 位'),

  // 开关控件
  newsletter: afz.boolean({
    type: 'switch',
    label: '订阅邮件通知'
  }),

  // 数字滑块
  age: afz.number({
    type: 'slider',
    label: '年龄',
    controlProps: { min: 18, max: 100 }
  }),

  // 地址信息卡片布局
  $addressLayout: afz.layout({
    component: 'UCard',
    props: {
      title: '地址信息',
      class: 'mt-4'
    }
  }),
  street: afz.string('请输入街道地址'),
  city: afz.string('请输入城市'),

  // 日期选择
  birthdate: afz.calendarDate('请选择出生日期')
})

const formData = ref()

async function handleSubmit() {
  console.log('提交数据：', formData.value)
}
</script>

<template>
  <MAutoForm
    v-model="formData"
    :schema="schema"
    @submit="handleSubmit"
  />
</template>

// ✅ 推荐：使用专用函数
afz.email('请输入邮箱')
afz.url('请输入 URL')
afz.uuid('请输入 UUID')

// ❌ 避免：已弃用的写法
afz.string().email()
afz.string().url()
afz.string().uuid()

// 元数据会在链式调用中自动传递
const schema = afz.string({
  type: 'withClear',
  label: '用户名'
})
  .optional()      // 元数据保留
  .default('')     // 元数据保留

const { afz, defineControl } = useAutoForm({
  myInput: defineControl({
    component: MyCustomInput,
    controlProps: { class: 'w-full' }
  })
})

// 现在可以在 Schema 中使用
const schema = afz.string({
  type: 'myInput',
  controlProps: { variant: 'outline' }
})