UI 组件库

form.bind(path) 返回 modelValue、onUpdate:modelValue 和 onBlur —— 大多数 UI 库的输入组件都接受这些属性。请把错误传给组件的错误属性 —— 每个库的命名不同。

Element Plus

<el-form-item :error="form.errors.email">
  <el-input v-bind="form.bind('email')" />
</el-form-item>

Vuetify

<v-text-field v-bind="form.bind('email')" :error-messages="form.errors.email" />

PrimeVue

<InputText v-bind="form.bind('email')" :invalid="!!form.errors.email" />
<Message v-if="form.errors.email" severity="error">{{ form.errors.email }}</Message>

Naive UI

<n-form-item :feedback="form.errors.email" :validation-status="form.errors.email ? 'error' : undefined">
  <n-input v-bind="form.bind('email')" />
</n-form-item>

自定义字段组件

为了避免重复标记，可以基于 useField 创建组件 —— 它会自动设置 name 和无障碍属性：

<!-- FormField.vue -->
<script setup lang="ts">
import { useField, type Form } from 'tinyval-vue';

const props = defineProps<{ form: Form<any, any>; path: string; label: string }>();
const { value, error, attrs, errorId } = useField<string>(props.form, () => props.path);
</script>

<template>
  <label class="field">
    {{ label }}
    <input v-model="value" v-bind="{ ...attrs, ...$attrs }" />
    <span v-if="error" :id="errorId" class="field__error">{{ error }}</span>
  </label>
</template>

<FormField :form="form" path="email" label="Email" type="email" />

另请参阅

• useForm：bind 及其他方法