使用场景
连接表单字段、标签、错误提示与帮助内容。prop 指向表单 model 字段，独立 help 提供不参与校验的说明。
帮助、标签与错误插槽
help 插槽覆盖 help 属性。label 插槽收到 label，error 插槽收到实际错误文本；自定义内容保留错误语义。
帮助、标签与错误插槽
vue
<template>
<div class="example">
<AsamBaseForm
ref="form"
v-bind="{ ...{ 'label-position': 'top' }, model: model, rules: rules }"
>
<AsamFormItem ref="item" v-bind="{ label: '项目名称', prop: 'name', help: '名称必填' }">
<template #label="{ label }"> {{ label }} * </template>
<AsamInput v-model="model.name" />
<template #help> 用于团队列表展示 </template>
<template #error="{ error }">
<span role="alert">
{{ error }}
</span>
</template>
</AsamFormItem>
</AsamBaseForm>
<AsamButton type="default" @click="submit"> 校验 </AsamButton>
<output>{{ result }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamFormItemBasicExample' });
import { ref, reactive } from 'vue';
import { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';
import type { AsamBaseFormExpose, AsamBaseFormProps } from '@asam-ui/ui';
const form = ref<AsamBaseFormExpose>();
const model = reactive({ name: '', team: '' });
const rules: AsamBaseFormProps['rules'] = {
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
team: [{ required: true, message: '请选择团队', trigger: 'change' }]
};
const result = ref('尚未提交');
async function submit() {
try {
await form.value?.validate();
result.value = '校验通过';
} catch {
result.value = '请检查必填项';
}
}
import type { AsamFormItemExpose } from '@asam-ui/ui';
const item = ref<AsamFormItemExpose>();
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamBaseForm
ref="form"
v-bind="{ ...{ 'label-position': 'top' }, model: model, rules: rules }"
>
<AsamFormItem ref="item" v-bind="{ label: '项目名称', prop: 'name', help: '名称必填' }">
<template #label="{ label }"> {{ label }} * </template>
<AsamInput v-model="model.name" />
<template #help> 用于团队列表展示 </template>
<template #error="{ error }">
<span role="alert">
{{ error }}
</span>
</template>
</AsamFormItem>
</AsamBaseForm>
<AsamButton type="default" @click="submit"> 校验 </AsamButton>
<output>{{ result }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamFormItemBasicExample' });
import { ref, reactive } from 'vue';
import { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';
const form = ref();
const model = reactive({ name: '', team: '' });
const rules = {
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
team: [{ required: true, message: '请选择团队', trigger: 'change' }]
};
const result = ref('尚未提交');
async function submit() {
try {
await form.value?.validate();
result.value = '校验通过';
} catch {
result.value = '请检查必填项';
}
}
const item = ref();
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>单项清除与重置
clearValidate 只清除单项提示，resetField 恢复单项初始值。validateState/validateMessage 是实时公开状态。
单项清除与重置
vue
<template>
<div class="example">
<AsamBaseForm :model="model">
<AsamFormItem
ref="item"
v-bind="{ label: '名称', prop: 'name' }"
:rules="[{ required: true, message: '名称必填', trigger: 'blur' }]"
>
<AsamInput v-model="model.name" />
</AsamFormItem>
</AsamBaseForm>
<div class="row">
<AsamButton type="default" @click="item?.clearValidate()"> 清除提示 </AsamButton>
<AsamButton type="default" @click="item?.resetField()"> 重置字段 </AsamButton>
</div>
<output>{{ item?.validateState }}：{{ item?.validateMessage }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamFormItemInstanceExample' });
import { ref, reactive } from 'vue';
import { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';
import type { AsamFormItemExpose } from '@asam-ui/ui';
const item = ref<AsamFormItemExpose>();
const model = reactive({ name: 'ASAM' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamBaseForm :model="model">
<AsamFormItem
ref="item"
v-bind="{ label: '名称', prop: 'name' }"
:rules="[{ required: true, message: '名称必填', trigger: 'blur' }]"
>
<AsamInput v-model="model.name" />
</AsamFormItem>
</AsamBaseForm>
<div class="row">
<AsamButton type="default" @click="item?.clearValidate()"> 清除提示 </AsamButton>
<AsamButton type="default" @click="item?.resetField()"> 重置字段 </AsamButton>
</div>
<output>{{ item?.validateState }}：{{ item?.validateMessage }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamFormItemInstanceExample' });
import { ref, reactive } from 'vue';
import { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';
const item = ref();
const model = reactive({ name: 'ASAM' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>四档尺寸与上下文继承
四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。
四档尺寸与上下文继承
vue
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamBaseForm :model="model" label-position="top">
<AsamFormItem
v-bind="{
size: 'large',
label: '项目名称',
prop: 'name',
help: '辅助说明'
}"
>
<AsamInput v-model="model.name" />
</AsamFormItem>
</AsamBaseForm>
</section>
<section data-density="big">
<strong> big </strong>
<AsamBaseForm :model="model" label-position="top">
<AsamFormItem
v-bind="{ size: 'big', label: '项目名称', prop: 'name', help: '辅助说明' }"
>
<AsamInput v-model="model.name" />
</AsamFormItem>
</AsamBaseForm>
</section>
<section data-density="default">
<strong> default </strong>
<AsamBaseForm :model="model" label-position="top">
<AsamFormItem
v-bind="{
size: 'default',
label: '项目名称',
prop: 'name',
help: '辅助说明'
}"
>
<AsamInput v-model="model.name" />
</AsamFormItem>
</AsamBaseForm>
</section>
<section data-density="small">
<strong> small </strong>
<AsamBaseForm :model="model" label-position="top">
<AsamFormItem
v-bind="{
size: 'small',
label: '项目名称',
prop: 'name',
help: '辅助说明'
}"
>
<AsamInput v-model="model.name" />
</AsamFormItem>
</AsamBaseForm>
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamBaseForm :model="model" label-position="top">
<AsamFormItem label="项目名称" prop="name" help="辅助说明">
<AsamInput v-model="model.name" />
</AsamFormItem>
</AsamBaseForm>
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamFormItemSizesExample' });
import { ref, reactive } from 'vue';
import { AsamBaseForm, AsamFormItem, AsamInput, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
const model = reactive({ name: 'ASAM' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamBaseForm :model="model" label-position="top">
<AsamFormItem
v-bind="{
size: 'large',
label: '项目名称',
prop: 'name',
help: '辅助说明'
}"
>
<AsamInput v-model="model.name" />
</AsamFormItem>
</AsamBaseForm>
</section>
<section data-density="big">
<strong> big </strong>
<AsamBaseForm :model="model" label-position="top">
<AsamFormItem
v-bind="{ size: 'big', label: '项目名称', prop: 'name', help: '辅助说明' }"
>
<AsamInput v-model="model.name" />
</AsamFormItem>
</AsamBaseForm>
</section>
<section data-density="default">
<strong> default </strong>
<AsamBaseForm :model="model" label-position="top">
<AsamFormItem
v-bind="{
size: 'default',
label: '项目名称',
prop: 'name',
help: '辅助说明'
}"
>
<AsamInput v-model="model.name" />
</AsamFormItem>
</AsamBaseForm>
</section>
<section data-density="small">
<strong> small </strong>
<AsamBaseForm :model="model" label-position="top">
<AsamFormItem
v-bind="{
size: 'small',
label: '项目名称',
prop: 'name',
help: '辅助说明'
}"
>
<AsamInput v-model="model.name" />
</AsamFormItem>
</AsamBaseForm>
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamBaseForm :model="model" label-position="top">
<AsamFormItem label="项目名称" prop="name" help="辅助说明">
<AsamInput v-model="model.name" />
</AsamFormItem>
</AsamBaseForm>
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamFormItemSizesExample' });
import { ref, reactive } from 'vue';
import { AsamBaseForm, AsamFormItem, AsamInput, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
const model = reactive({ name: 'ASAM' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>标签关联、分组与自定义错误
一个输入控件时，label 自动绑定输入 id；多个输入控件时外层使用 group 语义，使用方应为每个输入补充 aria-label。 完整说明。
可访问标签、错误插槽与单项初始值
vue
<template>
<div class="example">
<AsamBaseForm :model="model" label-width="120px" status-icon>
<AsamFormItem
ref="single"
label="单一控件"
prop="single"
help="help 属性"
:rules="[{ required: true, message: '请填写单一控件' }]"
>
<template #label="{ label }">
<strong>{{ label }}</strong>
</template>
<AsamInput v-model="model.single" />
<template #help>help 插槽覆盖属性，并独立于校验消息</template>
<template #error="{ error }">
<span role="alert">自定义错误：{{ error }}</span>
</template>
</AsamFormItem>
<AsamFormItem label="控件组" label-position="top" required>
<div class="demo-slot-layout">
<AsamInput v-model="model.first" aria-label="名字" />
<AsamInput v-model="model.last" aria-label="姓氏" />
</div>
</AsamFormItem>
<AsamFormItem
label="指定关联"
for="explicit-input"
:label-width="0"
:error="externalError"
>
<AsamInput id="explicit-input" aria-label="指定关联" />
</AsamFormItem>
</AsamBaseForm>
<div class="controls">
<AsamButton type="default" @click="validate">单项校验</AsamButton>
<AsamButton type="default" @click="single?.clearValidate()">清除单项</AsamButton>
<AsamButton type="default" @click="single?.setInitialValue('新的单项初始值')">
设置单项初始值
</AsamButton>
<AsamButton type="default" @click="single?.resetField()">恢复单项</AsamButton>
<AsamButton type="default" @click="externalError = externalError ? '' : '服务端错误'">
切换外部错误
</AsamButton>
</div>
<output>{{ single?.validateState }}；{{ single?.validateMessage }}；{{ result }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamFormItemAccessibilityExample' });
import { reactive, ref } from 'vue';
import { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';
import type { AsamFormItemExpose } from '@asam-ui/ui';
const model = reactive({ single: '', first: '', last: '' });
const single = ref<AsamFormItemExpose>();
const externalError = ref('');
const result = ref('');
async function validate(): Promise<void> {
try {
await single.value?.validate('');
result.value = '单项有效';
} catch {
result.value = '单项无效';
}
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
.controls {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
}
</style>
<style scoped>
.demo-slot-layout {
display: grid;
gap: var(--asam-space-md);
width: 100%;
min-width: 0;
}
.demo-slot-layout > .el-button {
justify-self: start;
}
.demo-slot-layout > :is(p, pre, output) {
margin-block: 0;
}
.demo-slot-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
.demo-slot-actions > .el-button + .el-button {
margin-left: 0;
}
</style>vue
<template>
<div class="example">
<AsamBaseForm :model="model" label-width="120px" status-icon>
<AsamFormItem
ref="single"
label="单一控件"
prop="single"
help="help 属性"
:rules="[{ required: true, message: '请填写单一控件' }]"
>
<template #label="{ label }">
<strong>{{ label }}</strong>
</template>
<AsamInput v-model="model.single" />
<template #help>help 插槽覆盖属性，并独立于校验消息</template>
<template #error="{ error }">
<span role="alert">自定义错误：{{ error }}</span>
</template>
</AsamFormItem>
<AsamFormItem label="控件组" label-position="top" required>
<div class="demo-slot-layout">
<AsamInput v-model="model.first" aria-label="名字" />
<AsamInput v-model="model.last" aria-label="姓氏" />
</div>
</AsamFormItem>
<AsamFormItem
label="指定关联"
for="explicit-input"
:label-width="0"
:error="externalError"
>
<AsamInput id="explicit-input" aria-label="指定关联" />
</AsamFormItem>
</AsamBaseForm>
<div class="controls">
<AsamButton type="default" @click="validate">单项校验</AsamButton>
<AsamButton type="default" @click="single?.clearValidate()">清除单项</AsamButton>
<AsamButton type="default" @click="single?.setInitialValue('新的单项初始值')">
设置单项初始值
</AsamButton>
<AsamButton type="default" @click="single?.resetField()">恢复单项</AsamButton>
<AsamButton type="default" @click="externalError = externalError ? '' : '服务端错误'">
切换外部错误
</AsamButton>
</div>
<output>{{ single?.validateState }}；{{ single?.validateMessage }}；{{ result }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamFormItemAccessibilityExample' });
import { reactive, ref } from 'vue';
import { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';
const model = reactive({ single: '', first: '', last: '' });
const single = ref();
const externalError = ref('');
const result = ref('');
async function validate() {
try {
await single.value?.validate('');
result.value = '单项有效';
} catch {
result.value = '单项无效';
}
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
.controls {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
}
</style>
<style scoped>
.demo-slot-layout {
display: grid;
gap: var(--asam-space-md);
width: 100%;
min-width: 0;
}
.demo-slot-layout > .el-button {
justify-self: start;
}
.demo-slot-layout > :is(p, pre, output) {
margin-block: 0;
}
.demo-slot-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
.demo-slot-actions > .el-button + .el-button {
margin-left: 0;
}
</style>默认错误消息具有 role="alert"；使用 error 插槽替换后也应保留辅助语义。 完整说明。
初始状态、动态状态与外部错误
当前版本保留原生初始化行为：validateStatus 的变化会更新内部 validateState，但初始化时没有立即应用该属性。 完整说明。
初始与动态状态、外部错误和重置
vue
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "example" };
const _hoisted_2: any = { class: "controls" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const StateField_vue_1: any = __importDefault(require("./StateField.vue"));
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamFormItemStatusExample' },
__name: 'Demo',
setup(__props?: any) {
const initialStatus: any = (0, vue_3.ref)('success');
const initialError: any = (0, vue_3.ref)(false);
const revision: any = (0, vue_3.ref)(0);
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", _hoisted_1, [
(0, vue_2.createElementVNode)("div", _hoisted_2, [
_cache[9] || (_cache[9] = (0, vue_2.createElementVNode)("label", { for: "initial-status" }, "下次挂载的初始状态", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "initial-status",
modelValue: initialStatus.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((initialStatus).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "",
label: '空'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_2.createTextVNode)("空", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "error",
label: 'error'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_2.createTextVNode)("error", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "validating",
label: 'validating'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("validating", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "success",
label: 'success'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_2.createTextVNode)("success", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: initialError.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((initialError).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_2.createTextVNode)(" 初始外部错误", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
onClick: _cache[2] || (_cache[2] = ($event?: any) => (revision.value++))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_2.createTextVNode)("按初始设置重新挂载", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
((0, vue_2.openBlock)(), (0, vue_2.createBlock)(StateField_vue_1.default, {
key: revision.value,
"initial-status": initialStatus.value,
"initial-error": initialError.value ? '初始服务端提示' : ''
}, null, 8 /* PROPS */, ["initial-status", "initial-error"]))
]));
};
}
});
exports.default.__scopeId = "data-v-744db1f4";
},
"StateField.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "state-example" };
const _hoisted_2: any = { class: "controls" };
const _hoisted_3: any = { "data-field-props": "" };
const _hoisted_4: any = { "data-field-state": "" };
const _hoisted_5: any = { "data-field-message": "" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamFormItemStateFieldExample' },
__name: 'StateField',
props: {
initialStatus: { type: String, default: '' },
initialError: { type: String, default: '' }
},
setup(__props?: any) {
const props: any = __props;
const model: any = (0, vue_3.reactive)({ value: '初始值' });
const field: any = (0, vue_3.ref)();
const status: any = (0, vue_3.ref)(props.initialStatus);
const error: any = (0, vue_3.ref)(props.initialError);
const result: any = (0, vue_3.ref)('初始状态参数与内部状态分别显示；修改动态状态后观察结果。');
function toggleError() {
error.value = error.value === '服务端提示' ? '更新服务端提示' : '服务端提示';
}
async function validate() {
try {
await field.value?.validate('');
result.value = '校验通过';
}
catch {
result.value = '校验失败';
}
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", _hoisted_1, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamBaseForm), {
model: model,
"label-position": "top"
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamFormItem), {
ref_key: "field",
ref: field,
label: "状态示例字段",
prop: "value",
"validate-status": status.value,
error: error.value,
rules: [{ required: true, message: '字段不能为空' }]
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamInput), {
modelValue: model.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((model.value) = $event)),
"validate-event": false
}, null, 8 /* PROPS */, ["modelValue"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["validate-status", "error"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["model"]),
(0, vue_2.createElementVNode)("div", _hoisted_2, [
_cache[14] || (_cache[14] = (0, vue_2.createElementVNode)("label", { for: "dynamic-status" }, "动态传入状态", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "dynamic-status",
modelValue: status.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((status).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "",
label: '空'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("空", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "error",
label: 'error'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_2.createTextVNode)("error", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "validating",
label: 'validating'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_2.createTextVNode)("validating", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "success",
label: 'success'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_2.createTextVNode)("success", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
onClick: toggleError
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_2.createTextVNode)("切换外部错误", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
onClick: _cache[2] || (_cache[2] = ($event?: any) => (error.value = ''))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_2.createTextVNode)("清空外部错误", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
onClick: validate
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_2.createTextVNode)("校验字段", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
onClick: _cache[3] || (_cache[3] = ($event?: any) => (field.value?.clearValidate()))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_2.createTextVNode)("清除校验状态", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
onClick: _cache[4] || (_cache[4] = ($event?: any) => (field.value?.resetField()))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_2.createTextVNode)("重置字段", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_2.createElementVNode)("output", _hoisted_3, (0, vue_2.toDisplayString)('传入状态：' + (status.value || '空') + '；传入错误：' + (error.value || '空')), 1 /* TEXT */),
(0, vue_2.createElementVNode)("output", _hoisted_4, "内部状态：" + (0, vue_2.toDisplayString)(field.value?.validateState || '空'), 1 /* TEXT */),
(0, vue_2.createElementVNode)("output", _hoisted_5, "内部消息：" + (0, vue_2.toDisplayString)(field.value?.validateMessage || '空'), 1 /* TEXT */),
(0, vue_2.createElementVNode)("output", null, (0, vue_2.toDisplayString)(result.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-1f787091";
},
};
const __dependencies: any = {"Demo.vue":{"./StateField.vue":"StateField.vue"},"StateField.vue":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.example[data-v-744db1f4] {
display: grid;
gap: var(--asam-space-md);
}
.controls[data-v-744db1f4] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
.state-example[data-v-1f787091] {
display: grid;
gap: var(--asam-space-sm);
}
.controls[data-v-1f787091] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
</style>vue
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "example" };
const _hoisted_2 = { class: "controls" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const StateField_vue_1 = __importDefault(require("./StateField.vue"));
exports.default = Object.assign({ name: 'AsamFormItemStatusExample' }, {
__name: 'Demo',
setup(__props) {
const initialStatus = (0, vue_2.ref)('success');
const initialError = (0, vue_2.ref)(false);
const revision = (0, vue_2.ref)(0);
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", _hoisted_1, [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
_cache[9] || (_cache[9] = (0, vue_1.createElementVNode)("label", { for: "initial-status" }, "下次挂载的初始状态", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "initial-status",
modelValue: initialStatus.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((initialStatus).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "",
label: '空'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_1.createTextVNode)("空", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "error",
label: 'error'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_1.createTextVNode)("error", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "validating",
label: 'validating'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("validating", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "success",
label: 'success'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_1.createTextVNode)("success", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: initialError.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((initialError).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_1.createTextVNode)(" 初始外部错误", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
onClick: _cache[2] || (_cache[2] = $event => (revision.value++))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_1.createTextVNode)("按初始设置重新挂载", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
((0, vue_1.openBlock)(), (0, vue_1.createBlock)(StateField_vue_1.default, {
key: revision.value,
"initial-status": initialStatus.value,
"initial-error": initialError.value ? '初始服务端提示' : ''
}, null, 8 /* PROPS */, ["initial-status", "initial-error"]))
]));
};
}
});
exports.default.__scopeId = "data-v-a58eb99f";
},
"StateField.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "state-example" };
const _hoisted_2 = { class: "controls" };
const _hoisted_3 = { "data-field-props": "" };
const _hoisted_4 = { "data-field-state": "" };
const _hoisted_5 = { "data-field-message": "" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = Object.assign({ name: 'AsamFormItemStateFieldExample' }, {
__name: 'StateField',
props: {
initialStatus: { type: String, default: '' },
initialError: { type: String, default: '' }
},
setup(__props) {
const props = __props;
const model = (0, vue_2.reactive)({ value: '初始值' });
const field = (0, vue_2.ref)();
const status = (0, vue_2.ref)(props.initialStatus);
const error = (0, vue_2.ref)(props.initialError);
const result = (0, vue_2.ref)('初始状态参数与内部状态分别显示；修改动态状态后观察结果。');
function toggleError() {
error.value = error.value === '服务端提示' ? '更新服务端提示' : '服务端提示';
}
async function validate() {
try {
await field.value?.validate('');
result.value = '校验通过';
}
catch {
result.value = '校验失败';
}
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", _hoisted_1, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamBaseForm), {
model: model,
"label-position": "top"
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamFormItem), {
ref_key: "field",
ref: field,
label: "状态示例字段",
prop: "value",
"validate-status": status.value,
error: error.value,
rules: [{ required: true, message: '字段不能为空' }]
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamInput), {
modelValue: model.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((model.value) = $event)),
"validate-event": false
}, null, 8 /* PROPS */, ["modelValue"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["validate-status", "error"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["model"]),
(0, vue_1.createElementVNode)("div", _hoisted_2, [
_cache[14] || (_cache[14] = (0, vue_1.createElementVNode)("label", { for: "dynamic-status" }, "动态传入状态", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "dynamic-status",
modelValue: status.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((status).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "",
label: '空'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("空", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "error",
label: 'error'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_1.createTextVNode)("error", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "validating",
label: 'validating'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_1.createTextVNode)("validating", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "success",
label: 'success'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_1.createTextVNode)("success", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
onClick: toggleError
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_1.createTextVNode)("切换外部错误", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
onClick: _cache[2] || (_cache[2] = $event => (error.value = ''))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_1.createTextVNode)("清空外部错误", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
onClick: validate
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_1.createTextVNode)("校验字段", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
onClick: _cache[3] || (_cache[3] = $event => (field.value?.clearValidate()))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_1.createTextVNode)("清除校验状态", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
onClick: _cache[4] || (_cache[4] = $event => (field.value?.resetField()))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_1.createTextVNode)("重置字段", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_1.createElementVNode)("output", _hoisted_3, (0, vue_1.toDisplayString)('传入状态：' + (status.value || '空') + '；传入错误：' + (error.value || '空')), 1 /* TEXT */),
(0, vue_1.createElementVNode)("output", _hoisted_4, "内部状态：" + (0, vue_1.toDisplayString)(field.value?.validateState || '空'), 1 /* TEXT */),
(0, vue_1.createElementVNode)("output", _hoisted_5, "内部消息：" + (0, vue_1.toDisplayString)(field.value?.validateMessage || '空'), 1 /* TEXT */),
(0, vue_1.createElementVNode)("output", null, (0, vue_1.toDisplayString)(result.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-d49c5d56";
},
};
const __dependencies = {"Demo.vue":{"./StateField.vue":"StateField.vue"},"StateField.vue":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.example[data-v-a58eb99f] {
display: grid;
gap: var(--asam-space-md);
}
.controls[data-v-a58eb99f] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
.state-example[data-v-d49c5d56] {
display: grid;
gap: var(--asam-space-sm);
}
.controls[data-v-d49c5d56] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
</style>error 有初始化处理：非空初始 error 会设置内部错误状态和消息。 完整说明。
字段实例支持校验、清除校验、重置与提交值等操作，具体 Promise 规则见下方。 完整说明。
ASAM 扩展与迁移
ASAM 扩展为 help 属性/插槽与四档 size。表单项没有独立业务事件；控件自己的 change/input 与表单校验事件各有职责。labelWidth/labelPosition/required/error 使用当前契约，业务必填规则优先配置 rules。
API 阅读方式
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。
API
属性 AsamFormItemProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
help | — | string | undefined | — |
required | 是否为必填项，如不设置，则会根据校验规则确认 | boolean | undefined | undefined |
error | 验证错误信息的显示内容 | string | undefined | — |
label | 标签位置显示的内容 | string | undefined | — |
labelWidth | 标签宽度，例如 '50px'。可以使用 auto。 | string | number | undefined | — |
prop | model 的字段键，可以使用属性路径数组，例如 ['a', 'b', '0']；校验或重置字段时必须提供。 | (AsamFormItemProps)["prop"] | — |
rules | 表单校验规则，参阅规则表；高级用法见 async-validator。 | (AsamFormItemProps)["rules"] | — |
labelPosition | 标签位置；left 或 right 同时需要 label-width，默认继承表单的 label-position。 | enum"" | "top" | "right" | "left"完整类型："" | "top" | "right" | "left" | undefined | "" |
inlineMessage | 是否在行内显示校验信息 | boolean | undefined | undefined |
showMessage | 是否显示校验错误信息 | boolean | undefined | true |
validateStatus | formitem 校验的状态 | enum"" | "success" | "error" | "validating"完整类型："" | "success" | "error" | "validating" | undefined | — |
for | 和原生标签相同能力 | string | undefined | — |
size | 表单项大小 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | undefined |
插槽 AsamFormItemSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
label | — | ((scope: { label: string; }) => unknown) | undefined | — |
error | — | ((scope: { error: string; }) => unknown) | undefined | — |
help | — | (() => unknown) | undefined | — |
实例方法与状态 AsamFormItemExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | 表单项大小 | enum"" | "large" | "default" | "small"完整类型："" | "large" | "default" | "small" | — |
validate | 验证表单项 | (AsamFormItemExpose)["validate"] | — |
clearValidate | 移除该表单项的校验结果 | () => void | — |
validateMessage | 校验消息 | string | — |
validateState | 校验状态 | enum"" | "success" | "error" | "validating"完整类型："" | "success" | "error" | "validating" | — |
resetField | 对该表单项进行重置，将其值重置为初始值并移除校验结果 | () => void | — |
setInitialValue | 设置表单字段的初始值。当调用 resetFields 时，字段将重置为这些值。 | (value: any) => void | — |
用法与契约补充说明
标签关联、分组与自定义错误
一个输入控件时，label 自动绑定输入 id；多个输入控件时外层使用 group 语义，使用方应为每个输入补充 aria-label。for 可显式关联原生 input。labelPosition 覆盖父表单；labelWidth 的数值 0 保持零宽度。required 控制必填外观，真实校验仍由 rules 决定。
标签关联、分组与自定义错误
默认错误消息具有 role="alert"；使用 error 插槽替换后也应保留辅助语义。外部 error 更新内部状态和消息，提示区域可能延后插入并经过入场动画；showMessage 控制消息显示，inlineMessage 控制排列。label/error 插槽分别接收 label/error 文本；help 插槽覆盖 help 属性且不参与校验。
初始状态、动态状态与外部错误
当前版本保留原生初始化行为：validateStatus 的变化会更新内部 validateState，但初始化时没有立即应用该属性。特别是初始传入 success 且没有 error 时，不能据此保证初始成功外观；公开属性仍可用于挂载后的动态状态更新。示例将传入属性和真实内部状态分别显示，可选择空/error/validating/success 后重新挂载，再单独修改动态状态。
初始状态、动态状态与外部错误
error 有初始化处理：非空初始 error 会设置内部错误状态和消息。之后 error 或 validateStatus 改变、执行 validate 或清除/重置方法，都可再次改变内部状态；它们不是固定的永久优先级。clearValidate 清内部状态和消息，不改字段值，也不改使用方的 error/validateStatus 属性。resetField 恢复已注册字段的初始值并清状态；仍不改外部属性。外部属性保持相同值时不会因清除/重置自动重新应用，需新的属性变化或校验动作。示例关闭输入的自动校验事件，以便分别观察这些操作。辅助测试先等待实际提示可见，不以内部状态已变代替 DOM 已就绪。
更多参数与事件说明
初始状态、动态状态与外部错误
实例 validate(trigger, callback) 可使用 Promise 或 callback；clearValidate 不清值，resetField 恢复本字段基线，setInitialValue 只替换后续重置基线，size/validateState/validateMessage 为实时状态。prop 在校验、重置时必需，支持嵌套数组路径；动态注册、异步跨字段规则见 AsamBaseForm。
关联组件
参数与事件补充说明
参数与事件说明
help
必填：否；声明来源：ASAM 声明。
required
必填：否；声明来源：上游声明。
required 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（已安装运行时；已安装组件）error
必填：否；声明来源：上游声明。
label
必填：否；声明来源：上游声明。
labelWidth
必填：否；声明来源：上游声明。
prop
必填：否；声明来源：上游声明。
rules
必填：否；声明来源：上游声明。
rules 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
rules.trigger:PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "trigger">— 上游声明rules.type:PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "type">— 依赖声明枚举：
"string"/"number"/"boolean"/"object"/"email"/"url"/"date"/"hex"/"method"/"array"/"float"/"regexp"/"integer"/"enum"/"pattern"/"any"rules.required:boolean | undefined— 依赖声明枚举：
false/truerules.pattern:string | RegExp | undefined— 依赖声明rules.pattern.exec:(string: string) => RegExpExecArray | null— 依赖声明使用正则表达式检索字符串，返回匹配结果数组。
事件参数：
(string: string): RegExpExecArray | null嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.pattern.test:(string: string) => boolean— 依赖声明返回布尔值，表示被检索字符串是否包含匹配模式。
事件参数：
(string: string): boolean嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.pattern.source:string— 依赖声明返回正则表达式模式文本的只读副本；regExp 参数为正则对象，可以使用变量或字面量。
rules.pattern.global:boolean— 依赖声明返回正则表达式 global（g）标志的只读布尔状态，默认为 false。
枚举：
false/truerules.pattern.ignoreCase:boolean— 依赖声明返回正则表达式 ignoreCase（i）标志的只读布尔状态，默认为 false。
枚举：
false/truerules.pattern.multiline:boolean— 依赖声明返回正则表达式 multiline（m）标志的只读布尔状态，默认为 false。
枚举：
false/truerules.pattern.lastIndex:number— 依赖声明rules.pattern.compile:(pattern: string, flags?: string) => RegExp— 依赖声明事件参数：
(pattern: string, flags?: string | undefined): RegExp嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.pattern.flags:string— 依赖声明返回正则表达式标志的只读字符串，按 g（全局）、i（忽略大小写）、m（多行）、u（Unicode）、y（粘连）顺序排列；未设置标志时为空字符串。
rules.pattern.sticky:boolean— 依赖声明返回正则表达式 sticky（y）标志的只读布尔状态，默认为 false。
枚举：
false/truerules.pattern.unicode:boolean— 依赖声明返回正则表达式 Unicode（u）标志的只读布尔状态，默认为 false。
枚举：
false/truerules.pattern.dotAll:boolean— 依赖声明返回正则表达式 dotAll（s）标志的只读布尔状态，默认为 false。
枚举：
false/truerules.pattern.hasIndices:boolean— 依赖声明返回正则表达式 hasIndices（d）标志的只读布尔状态，默认为 false。
枚举：
false/truerules.pattern.__@match@8899:(string: string) => RegExpMatchArray | null— 依赖声明使用此正则表达式匹配字符串，并返回包含匹配结果的数组。
事件参数：
(string: string): RegExpMatchArray | null嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.pattern.__@replace@8901:{ (string: string, replaceValue: string): string; (string: string, replacer: (substring: string, ...args: any[]) => string): string; }— 依赖声明使用此正则表达式替换字符串中的文本。
事件参数：
(string: string, replaceValue: string): string事件参数：
(string: string, replacer: (substring: string, ...args: any[]) => string): string嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.pattern.__@search@8904:(string: string) => number— 依赖声明返回使用此正则表达式检索时，首个匹配子串的起始位置。
事件参数：
(string: string): number嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.pattern.__@split@8906:(string: string, limit?: number) => string[]— 依赖声明使用与此正则匹配的内容分隔原始字符串，返回子串数组；若含捕获组，每次匹配的捕获结果也会插入数组，包括 undefined 结果。
事件参数：
(string: string, limit?: number | undefined): string[]嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.pattern.__@matchAll@8908:(str: string) => RegExpStringIterator<RegExpExecArray>— 依赖声明使用此正则表达式匹配字符串，并返回包含匹配结果的可迭代对象。
事件参数：
(str: string): RegExpStringIterator<RegExpExecArray>嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.min:number | undefined— 依赖声明rules.max:number | undefined— 依赖声明rules.len:number | undefined— 依赖声明rules.enum:(string | number | boolean | null | undefined)[] | undefined— 依赖声明rules.whitespace:boolean | undefined— 依赖声明枚举：
false/truerules.fields:PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "fields">— 依赖声明rules.options:PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">— 依赖声明rules.options.suppressWarning:boolean | undefined— 依赖声明枚举：
false/truerules.options.suppressValidatorError:boolean | undefined— 依赖声明枚举：
false/truerules.options.first:boolean | undefined— 依赖声明枚举：
false/truerules.options.firstFields:boolean | string[] | undefined— 依赖声明枚举：
false/truerules.options.messages:PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">— 依赖声明rules.options.messages.default:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "default">— 依赖声明事件参数：
(...args: unknown[]): string嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.options.messages.required:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "required">— 依赖声明事件参数：
(...args: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "required">>, (...args: never[]) => unknown>> extends [...infer Rest] ? Rest : never): string嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.options.messages.enum:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "enum">— 依赖声明事件参数：
(...args: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "enum">>, (...args: never[]) => unknown>> extends [...infer Rest] ? Rest : never): string嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.options.messages.whitespace:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "whitespace">— 依赖声明事件参数：
(...args: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "whitespace">>, (...args: never[]) => unknown>> extends [...infer Rest] ? Rest : never): string嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.options.messages.date:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "date">— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.options.messages.types:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "types">— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.options.messages.string:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "string">— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.options.messages.number:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "number">— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.options.messages.array:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "array">— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.options.messages.pattern:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "messages">>, "pattern">— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.options.keys:string[] | undefined— 依赖声明需要触发的校验规则名称；留空时校验全部规则。
rules.options.error:PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "error">— 依赖声明事件参数：
(rule: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "error">>, (...args: never[]) => unknown>>[0], message: string): ReturnType<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "options">>, "error">>, (...args: never[]) => unknown>>
rules.defaultField:PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">— 依赖声明rules.defaultField.type:PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "type">— 依赖声明枚举：
"string"/"number"/"boolean"/"object"/"email"/"url"/"date"/"hex"/"method"/"array"/"float"/"regexp"/"integer"/"enum"/"pattern"/"any"rules.defaultField.required:boolean | undefined— 依赖声明枚举：
false/truerules.defaultField.pattern:string | RegExp | undefined— 依赖声明rules.defaultField.pattern.exec:(string: string) => RegExpExecArray | null— 依赖声明使用正则表达式检索字符串，返回匹配结果数组。
事件参数：
(string: string): RegExpExecArray | null嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.defaultField.pattern.test:(string: string) => boolean— 依赖声明返回布尔值，表示被检索字符串是否包含匹配模式。
事件参数：
(string: string): boolean嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.defaultField.pattern.source:string— 依赖声明返回正则表达式模式文本的只读副本；regExp 参数为正则对象，可以使用变量或字面量。
嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.pattern.global:boolean— 依赖声明返回正则表达式 global（g）标志的只读布尔状态，默认为 false。
枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.pattern.ignoreCase:boolean— 依赖声明返回正则表达式 ignoreCase（i）标志的只读布尔状态，默认为 false。
枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.pattern.multiline:boolean— 依赖声明返回正则表达式 multiline（m）标志的只读布尔状态，默认为 false。
枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.pattern.lastIndex:number— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.pattern.compile:(pattern: string, flags?: string) => RegExp— 依赖声明事件参数：
(pattern: string, flags?: string | undefined): RegExp嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.defaultField.pattern.flags:string— 依赖声明返回正则表达式标志的只读字符串，按 g（全局）、i（忽略大小写）、m（多行）、u（Unicode）、y（粘连）顺序排列；未设置标志时为空字符串。
嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.pattern.sticky:boolean— 依赖声明返回正则表达式 sticky（y）标志的只读布尔状态，默认为 false。
枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.pattern.unicode:boolean— 依赖声明返回正则表达式 Unicode（u）标志的只读布尔状态，默认为 false。
枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.pattern.dotAll:boolean— 依赖声明返回正则表达式 dotAll（s）标志的只读布尔状态，默认为 false。
枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.pattern.hasIndices:boolean— 依赖声明返回正则表达式 hasIndices（d）标志的只读布尔状态，默认为 false。
枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.pattern.__@match@8899:(string: string) => RegExpMatchArray | null— 依赖声明使用此正则表达式匹配字符串，并返回包含匹配结果的数组。
事件参数：
(string: string): RegExpMatchArray | null嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.defaultField.pattern.__@replace@8901:{ (string: string, replaceValue: string): string; (string: string, replacer: (substring: string, ...args: any[]) => string): string; }— 依赖声明使用此正则表达式替换字符串中的文本。
事件参数：
(string: string, replaceValue: string): string事件参数：
(string: string, replacer: (substring: string, ...args: any[]) => string): string嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.defaultField.pattern.__@search@8904:(string: string) => number— 依赖声明返回使用此正则表达式检索时，首个匹配子串的起始位置。
事件参数：
(string: string): number嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.defaultField.pattern.__@split@8906:(string: string, limit?: number) => string[]— 依赖声明使用与此正则匹配的内容分隔原始字符串，返回子串数组；若含捕获组，每次匹配的捕获结果也会插入数组，包括 undefined 结果。
事件参数：
(string: string, limit?: number | undefined): string[]嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.defaultField.pattern.__@matchAll@8908:(str: string) => RegExpStringIterator<RegExpExecArray>— 依赖声明使用此正则表达式匹配字符串，并返回包含匹配结果的可迭代对象。
事件参数：
(str: string): RegExpStringIterator<RegExpExecArray>嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
rules.defaultField.min:number | undefined— 依赖声明rules.defaultField.max:number | undefined— 依赖声明rules.defaultField.len:number | undefined— 依赖声明rules.defaultField.enum:(string | number | boolean | null | undefined)[] | undefined— 依赖声明rules.defaultField.whitespace:boolean | undefined— 依赖声明枚举：
false/truerules.defaultField.fields:PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "fields">— 依赖声明rules.defaultField.options:PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "options">— 依赖声明rules.defaultField.options.suppressWarning:boolean | undefined— 依赖声明枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.options.suppressValidatorError:boolean | undefined— 依赖声明枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.options.first:boolean | undefined— 依赖声明枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.options.firstFields:boolean | string[] | undefined— 依赖声明枚举：
false/true嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.options.messages:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "options">>, "messages">— 依赖声明嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.options.keys:string[] | undefined— 依赖声明需要触发的校验规则名称；留空时校验全部规则。
嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.options.error:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "options">>, "error">— 依赖声明事件参数：
(rule: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "options">>, "error">>, (...args: never[]) => unknown>>[0], message: string): ReturnType<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "options">>, "error">>, (...args: never[]) => unknown>>嵌套展开边界：深度上限；完整类型见公开类型视图。
rules.defaultField.defaultField:PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "defaultField">— 依赖声明嵌套展开边界：递归引用；完整类型见公开类型视图。
rules.defaultField.transform:PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "transform">— 依赖声明事件参数：
(value: any): anyrules.defaultField.message:string | ((a?: string) => string) | undefined— 依赖声明事件参数：
(a?: string | undefined): stringrules.defaultField.asyncValidator:PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "asyncValidator">— 依赖声明事件参数：
(rule: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "asyncValidator">>, (...args: never[]) => unknown>>[0], value: any, callback: (error?: string | Error) => void, source: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "asyncValidator">>, (...args: never[]) => unknown>>[3], options: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "asyncValidator">>, (...args: never[]) => unknown>>[4]): void | Promise<void>rules.defaultField.validator:PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "validator">— 依赖声明事件参数：
(rule: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "validator">>, (...args: never[]) => unknown>>[0], value: any, callback: (error?: string | Error) => void, source: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "validator">>, (...args: never[]) => unknown>>[3], options: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "validator">>, (...args: never[]) => unknown>>[4]): ReturnType<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "defaultField">>, "validator">>, (...args: never[]) => unknown>>
rules.transform:PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "transform">— 依赖声明事件参数：
(value: any): anyrules.message:string | ((a?: string) => string) | undefined— 依赖声明事件参数：
(a?: string | undefined): stringrules.asyncValidator:PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "asyncValidator">— 依赖声明事件参数：
(rule: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "asyncValidator">>, (...args: never[]) => unknown>>[0], value: any, callback: (error?: string | Error) => void, source: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "asyncValidator">>, (...args: never[]) => unknown>>[3], options: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "asyncValidator">>, (...args: never[]) => unknown>>[4]): void | Promise<void>rules.validator:PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "validator">— 依赖声明事件参数：
(rule: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "validator">>, (...args: never[]) => unknown>>[0], value: any, callback: (error?: string | Error) => void, source: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "validator">>, (...args: never[]) => unknown>>[3], options: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "validator">>, (...args: never[]) => unknown>>[4]): ReturnType<Extract<NonNullable<PublicMember<NonNullable<(AsamFormItemProps)["rules"]>, "validator">>, (...args: never[]) => unknown>>
labelPosition
必填：否；声明来源：上游声明。
labelPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "top" / "right" / "left"
默认值与来源
""（已安装运行时；已安装组件）inlineMessage
必填：否；声明来源：上游声明。
inlineMessage 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（已安装运行时；已安装组件）showMessage
必填：否；声明来源：上游声明。
showMessage 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）validateStatus
必填：否；声明来源：上游声明。
validateStatus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "success" / "error" / "validating"
for
必填：否；声明来源：上游声明。
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
默认值与来源
undefined（源码表达式；ASAM 声明）AsamFormItemProps 公开类型视图
ts
import type { AsamFormItemProps, AsamFormItemExpose, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamFormItemProps
type PublicContract = {
"help"?: string | undefined;
"required"?: boolean | undefined;
"error"?: string | undefined;
"label"?: string | undefined;
"labelWidth"?: string | number | undefined;
"prop"?: (AsamFormItemProps)["prop"];
"rules"?: (AsamFormItemProps)["rules"];
"labelPosition"?: "" | "top" | "right" | "left" | undefined;
"inlineMessage"?: boolean | undefined;
"showMessage"?: boolean | undefined;
"validateStatus"?: "" | "success" | "error" | "validating" | undefined;
"for"?: string | undefined;
"size"?: AsamControlSize | undefined;
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
label
必填：否；声明来源：ASAM 声明。
label 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { label: string; }): unknown
error
必填：否；声明来源：ASAM 声明。
error 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { error: string; }): unknown
help
必填：否；声明来源：ASAM 声明。
help 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamFormItemSlots 公开类型视图
ts
import type { AsamFormItemSlots } from '@asam-ui/ui';
// AsamFormItemSlots
type PublicContract = {
"default"?: (() => unknown) | undefined;
"label"?: ((scope: { label: string; }) => unknown) | undefined;
"error"?: ((scope: { error: string; }) => unknown) | undefined;
"help"?: (() => unknown) | undefined;
};参数与事件说明
size
必填：是；声明来源：上游声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "large" / "default" / "small"
validate
必填：是；声明来源：上游声明。
validate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(trigger: string, callback?: Parameters<Extract<NonNullable<(AsamFormItemExpose)["validate"]>, (...args: never[]) => unknown>>[1]): ReturnType<Extract<NonNullable<(AsamFormItemExpose)["validate"]>, (...args: never[]) => unknown>>
clearValidate
必填：是；声明来源：上游声明。
clearValidate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
validateMessage
必填：是；声明来源：上游声明。
validateState
必填：是；声明来源：上游声明。
validateState 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "success" / "error" / "validating"
resetField
必填：是；声明来源：上游声明。
resetField 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
setInitialValue
必填：是；声明来源：上游声明。
setInitialValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: any): void
AsamFormItemExpose 公开类型视图
ts
import type { AsamFormItemExpose } from '@asam-ui/ui';
// AsamFormItemExpose
type PublicContract = {
"size": "" | "large" | "default" | "small";
"validate": (AsamFormItemExpose)["validate"];
"clearValidate": () => void;
"validateMessage": string;
"validateState": "" | "success" | "error" | "validating";
"resetField": () => void;
"setInitialValue": (value: any) => void;
};