Light
Solid

AFormItem

AFormItem is a labeled field wrapper used inside AForm. Set label for the caption and prop to bind the item to a key of the form’s model — prop is what the parent AForm uses to run validation and display error messages for that field.

Import

import { FormItem } from '@any-design/anyui/vue';
// React:  import { FormItem } from '@any-design/anyui/react';
// Svelte: import { FormItem } from '@any-design/anyui/svelte';

Basic usage

Wrap a control, give it a label, and set prop to the matching model key.

<template>
  <AForm :model-value="model">
    <AFormItem label="Email" prop="email">
      <AInput v-model="model.email" placeholder="you@example.com" />
    </AFormItem>
  </AForm>
</template>

<script setup>
import { reactive } from 'vue';
const model = reactive({ email: '' });
</script>

Examples

Inside a form context

Place several AFormItems inside an AForm and pass the shared model; prop on each item ties the field to validation.

<template>
  <AForm :model-value="model">
    <AFormItem label="Username" prop="username">
      <AInput v-model="model.username" />
    </AFormItem>
    <AFormItem label="Password" prop="password">
      <AInput v-model="model.password" type="password" />
    </AFormItem>
  </AForm>
</template>

<script setup>
import { reactive } from 'vue';
const model = reactive({ username: '', password: '' });
</script>

Any control in the slot

The default slot accepts any input control — selects, textareas, or sliders.

<template>
  <AForm :model-value="model">
    <AFormItem label="Country" prop="country">
      <AInput v-model="model.country" placeholder="Select country" />
    </AFormItem>
  </AForm>
</template>

<script setup>
import { reactive } from 'vue';
const model = reactive({ country: '' });
</script>

Props

Prop Type Default Description
prop String undefined Model key this item binds to (used for validation).
label String undefined Label text.

Slots

Slot Props Description
default — The form control.

AFormItem

AFormItem 是 AForm 内部使用的带标签字段容器。用 label 设置标题，用 prop 将该项绑定到表单模型的某个键 —— 父级 AForm 正是通过 prop 来对该字段执行校验并显示错误信息。

引入

import { FormItem } from '@any-design/anyui/vue';
// React:  import { FormItem } from '@any-design/anyui/react';
// Svelte: import { FormItem } from '@any-design/anyui/svelte';

基础用法

包裹一个控件，设置 label，并将 prop 指向对应的模型键。

<template>
  <AForm :model-value="model">
    <AFormItem label="邮箱" prop="email">
      <AInput v-model="model.email" placeholder="you@example.com" />
    </AFormItem>
  </AForm>
</template>

<script setup>
import { reactive } from 'vue';
const model = reactive({ email: '' });
</script>

示例

在表单上下文中使用

将多个 AFormItem 放入 AForm，并传入共享的 model；每个项上的 prop 把字段与校验关联起来。

<template>
  <AForm :model-value="model">
    <AFormItem label="用户名" prop="username">
      <AInput v-model="model.username" />
    </AFormItem>
    <AFormItem label="密码" prop="password">
      <AInput v-model="model.password" type="password" />
    </AFormItem>
  </AForm>
</template>

<script setup>
import { reactive } from 'vue';
const model = reactive({ username: '', password: '' });
</script>

插槽中放置任意控件

默认插槽可以放任意输入控件 —— 选择器、多行文本、滑块等。

<template>
  <AForm :model-value="model">
    <AFormItem label="国家" prop="country">
      <AInput v-model="model.country" placeholder="选择国家" />
    </AFormItem>
  </AForm>
</template>

<script setup>
import { reactive } from 'vue';
const model = reactive({ country: '' });
</script>

属性

属性 类型 默认值 说明
prop String undefined 该字段绑定的模型键（用于校验）。
label String undefined 标签文本。

插槽

插槽 作用域参数 说明
default — 表单控件。
Email
Username
Password
Country
Live preview · Vue
<!-- Demo 1 -->
<template>
  <AForm :model-value="model">
    <AFormItem label="Email" prop="email">
      <AInput v-model="model.email" placeholder="you@example.com" />
    </AFormItem>
  </AForm>
</template>

<script setup>
import { reactive } from 'vue';
const model = reactive({ email: '' });
</script>

<!-- Demo 2 -->
<template>
  <AForm :model-value="model">
    <AFormItem label="Username" prop="username">
      <AInput v-model="model.username" />
    </AFormItem>
    <AFormItem label="Password" prop="password">
      <AInput v-model="model.password" type="password" />
    </AFormItem>
  </AForm>
</template>

<script setup>
import { reactive } from 'vue';
const model = reactive({ username: '', password: '' });
</script>

<!-- Demo 3 -->
<template>
  <AForm :model-value="model">
    <AFormItem label="Country" prop="country">
      <AInput v-model="model.country" placeholder="Select country" />
    </AFormItem>
  </AForm>
</template>

<script setup>
import { reactive } from 'vue';
const model = reactive({ country: '' });
</script>
Components组件参考