切换主题
YFormField
适用范围:Legacy Admin Kit / Schema 与旧
admin-vue。新admin-nuxtui的开发入口见管理端 Nuxt UI 指南。
定位 / Owner
YFormField 统一拥有 label、required、description、hint、error、readonly 说明与 aria-describedby 组合,并在首个新错误出现时支持合理 focus。
什么时候使用
所有需要 label/error/hint 的独立表单 control;SchemaForm 默认 field projection 也使用它。
基础用法
vue
<YFormField label="编码" required :error="errors.code">
<template #default="{ controlId, describedBy, invalid }">
<YInput
:id="controlId"
v-model="code"
:aria-describedby="describedBy"
:aria-invalid="invalid"
/>
</template>
</YFormField>Public API
Props:controlId、label、required、description、hint、error、readonly。
Default slot 暴露:controlId、describedBy、invalid。
不什么时候使用
不要让 feature 自己拼 label + hint + error DOM 再包 YInput;这会形成第二 Field anatomy。
Live Workbench
Admin Vue 稳定路径:
/frontend-module-demo/component-workbench/form-field
该路径只标识 live scenario,不固化部署 Host;官方文档站与 Admin Vue 可以独立部署。
Verification / Source
packages/yoyo-admin/admin-kit/src/ui/components/form/YFormField.vue- SchemaForm / Account / Tenant 等真实 consumer