FormField
interfaz Since 1.5.0 No import
Un campo de un Form, como lo devuelve form.field(name): lo necesario para que un
componente de campo propio enlace su control, su etiqueta y su mensaje sin recibir el formulario
entero. id y los demás IDs salen de useId, así que coinciden entre SSR e hidratación y no se
repiten entre formularios.
Se autoimporta en los componentes y en app/.
ts
import type { FormField } from "@meekojs/meeko/framework";Source code src/app/composables/useForm.ts:227
Declaración #
ts
interface FormField<Value> {
readonly name: string
readonly id: string
readonly errorId: string
readonly hintId: string
readonly value: Signal<Value>
readonly error: ReadonlySignal<string | undefined>
readonly invalid: ReadonlySignal<boolean>
readonly describedBy: ReadonlySignal<string | undefined>
}Type parameters #
-
Value Tipo del valor del campo.
Example #
meeko
<!-- app/components/AppField.meeko -->
<script lang="ts">
import type { FormField } from "@meekojs/meeko/framework";
const props = defineProps<{ field: FormField<string>; label: string; type?: string; hint?: string }>();
const describedBy = computed(() => [props.hint ? props.field.hintId : "", props.field.describedBy.value ?? ""].filter(Boolean).join(" ") || null);
</script>
<template>
<label bind:for="props.field.id">{props.label}</label>
<input bind:id="props.field.id" bind:name="props.field.name" bind:type="props.type ?? 'text'" model="props.field.value"
bind:aria-invalid="props.field.invalid.value ? 'true' : null" bind:aria-describedby="describedBy.value">
<p if:when="props.hint" bind:id="props.field.hintId">{props.hint}</p>
<p if:when="props.field.error.value" bind:id="props.field.errorId">{props.field.error.value}</p>
</template>meeko
<AppField bind:field="form.field('email')" label="Correo" type="email" />Propiedades #
error
#
readonly error: ReadonlySignal<string | undefined>Primer mensaje de error del campo (o de una ruta anidada, como items.0.name), o undefined.
describedBy
#
readonly describedBy: ReadonlySignal<string | undefined>errorId mientras el campo tiene un error, o undefined: el valor de aria-describedby.
See also #
- Field components: FormField Framework full-stack