useField

Одно поле формы — для своих компонентов полей. Даёт значение для v-model, ошибку и готовые атрибуты: name (нужен для фокуса на ошибке), id, aria-invalid, aria-describedby — экранные дикторы прочитают текст ошибки.

Сигнатура

function useField<T>(path: MaybeRefOrGetter<string>): Field<T>
function useField<T>(form: Form, path: MaybeRefOrGetter<string>): Field<T>

Возвращает	Описание
value	Значение поля — для v-model
error	Текст ошибки, если её пора показать
touched, dirty	Уходили ли с поля; отличается ли значение от начального
attrs	name, id, aria-invalid, aria-describedby, onBlur — для v-bind на <input>
errorId	id для элемента с текстом ошибки
onBlur	Отметить поле «тронутым»

path может быть ref или функцией — поле переключится на другой путь.

Без form форма берётся из контекста — от useForm или <TvForm> выше по дереву компонентов.

Пример

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

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

<template>
  <label :for="attrs.id">{{ label }}</label>
  <input v-model="value" v-bind="attrs" />
  <span v-if="error" :id="errorId" role="alert">{{ error }}</span>
</template>

<form @submit="submit">
  <TextField path="name" label="Name" />
  <TextField path="email" label="Email" type="email" />
</form>

См. также

• useForm
• UI-библиотеки