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 и остальные методы