Field
Expose a field instance to a renderless slot to bind its model and events to any control.
Field renders no element. It passes a field instance to its default slot so you can connect the value and validation events to native inputs or custom components.
Usage
<template>
<Field
v-slot="{ field }"
:field="form.field('profile.email')"
>
<label :for="field.path">Email</label>
<input
:id="field.path"
v-model="field.model"
v-bind="field.events"
autocomplete="email"
type="email"
>
<FieldError :errors="field" />
</Field>
</template>
form.field(path) returns the same cached field for the same path. Its model reads and writes form.values. Its events mark interaction and trigger validation according to the field's configuration.
Props
field
FieldInstance<TValue> required
The field created by
form.field(path), or an item from arrayField.items.Slot props
The default slot receives field.
| Member | Type | Description |
|---|---|---|
model | TValue | Two-way value. Assigning writes into form.values. Does not validate. |
events | { onBlur, onChange, onInput } | Handlers that mark interaction and trigger validation. Spread with v-bind. |
path | string | Current dot-notation path. Follows an array item when its position changes. Use it for id and for. |
id | symbol | Stable identity. Safe as a Vue key. Not valid as an HTML id. |
errors | ValidationIssue[] | Issues reported at exactly this path. |
isDirty | boolean | The value differs from the baseline value at this path. |
isTouched | boolean | The field blurred, or a submit was attempted. |
isValid | boolean | errors is empty. |
isValidating | boolean | The whole form, this field, or a field nested inside it is being validated. |
validate() | () => Promise<ValidationResult<TValue>> | Validate this field now, skipping any pending debounce. Resolves with { value } or { issues }. |
Extra attributes passed to Field arrive as additional slot props. Because Field renders no element, attach HTML attributes to the control inside the slot.
Configure validation
Pass options as the second argument to form.field(path, config). They are read when the field is first created. See Validation.
const username = form.field('username', { debounce: 300, validateOn: { input: true } })
Using a field without Field
The component is a convenience. A field instance works directly:
<script setup lang="ts">
const email = form.field('email')
</script>
<template>
<div>
<label :for="email.path">Email</label>
<input
:id="email.path"
v-model="email.model"
v-bind="email.events"
autocomplete="email"
type="email"
>
<FieldError :errors="email" />
</div>
</template>