Form 表单

McForm 是表单的父组件：提供原生 <form> 语义、字段注册上下文、提交入口和整体状态。输入组件（TextField、Select、Switch 等）是它的直接子组件，会自动注册到当前 Form。

表单展示与校验是两层职责：先用 Form 组织字段和操作区，再按需启用统一校验机制。标准输入组件已经内置 McFormField 展示层，不要再把它们包进第二层 McFormField；需要包装原生或自定义控件时才直接使用 FormField。

基础用法

下面只展示父组件、字段和操作区的组合，不引入规则或错误状态。

世界名称

启用实验功能

<div class="mc-demo mc-demo--column mc-form-demo">
  <mc-form>
    <mc-text-field label="世界名称" model-value="New World" />
    <mc-switch label="启用实验功能" :model-value="false" />
    <div class="mc-form-demo-actions">
      <mc-button type="submit" variant="primary">创建世界</mc-button>
      <mc-button type="button">取消</mc-button>
    </div>
  </mc-form>
</div>

父组件负责 form 和 fieldset 语义、disabled 级联以及插槽状态参数；字段组件负责自己的标签、控件、提示和错误展示。

验证机制

校验通过输入组件的 required、rules、errorMessages、validateOn 参与；Form 只负责聚合这些字段并提供整体操作。

世界名称 *

启用实验功能 *

valid=true · dirty=false · validating=false · 尚未校验

import { ref } from 'vue'

const name = ref('')
const enabled = ref(false)
const form = ref()
const valid = ref(true)
const validating = ref(false)
const dirty = ref(false)
const result = ref('尚未校验')

async function validate() {
  const value = await form.value.validate()
  result.value = value.valid ? '通过' : value.errors.join('、')
}
function reset() {
  form.value.reset()
  result.value = '已重置'
}

API

McForm Props

名称	类型	默认	说明
modelValue	boolean	true	聚合后的有效状态
validateOn	input | blur | submit | lazy	input	默认校验时机
fastFail	boolean	false	提交校验遇到首个无效字段即停止
disabled	boolean	false	禁用全部字段

Events

名称	参数	说明
update:modelValue	boolean	有效状态变化
update:validating	boolean	异步校验状态
update:dirty	boolean	任一字段已交互
submit	{ valid, errors }	原生 submit 后的校验结果
validate()	-	返回 { valid, errors }
reset()	-	重置值与校验
resetValidation()	-	只清空校验状态

所有标准输入组件共享同步/异步 rules；异步竞态只采纳最后一次结果。reset() 恢复挂载时捕获的初值并清空校验，不会立刻按 validateOn: input 再跑一遍。validateOn 支持 input、blur、submit 和 lazy。布尔字段的 required 只把 true 视为已填；空数组 errorMessages 不算错误。字段必须放在 McForm 内才会注册，插件级 Form 服务不会自动收集它们。McRadioGroup 作为单一字段注册，内部的 McRadio 不会再各注册一次。