useCheckLayout

useCheckLayout(...) adds extra validation around an existing FormField.

Signature

ts

useCheckLayout(formField, {
	dataParser?,
	refine?,
	class?: string,
	template?: Templates["check"],
});

Parameters

• formField: child field to validate.
• dataParser: extra validation and transformation applied after the child field check().
• refine: synchronous validation function returning EE.ok() or EE.error(message).
• class: CSS class added to the check template.
• template: local override of the check template.

Validation order

useCheckLayout(...) runs:

1. the child field check();
2. refine(...), if present;
3. dataParser.parse(...), if present.

check template contract

Props

ts

{
	fieldKey: string;
	getCurrentValue(): unknown;
	getErrorMessage(): string | null;
}

Slots

ts

{
	formField(): any;
}

Small template example

vue

<script setup lang="ts">
import { type CheckTemplateProperties } from "@duplojs/form/vue";

defineProps<CheckTemplateProperties["props"]>();
defineSlots<CheckTemplateProperties["slots"]>();
</script>

<template>
	<div>
		<slot name="formField" />

		<small v-if="getErrorMessage()">
			{{ getErrorMessage() }}
		</small>
	</div>
</template>

ts

import { createTemplate } from "@duplojs/form/vue";
import MyCheckTemplate from "./checkTemplate.vue";

export const useMyCheckTemplate = createTemplate(
	"check",
	MyCheckTemplate,
);

Example

ts

import * as EE from "@duplojs/utils/either";
import { useCheckLayout } from "@duplojs/form/vue";
import { useTextInput } from "@duplojs/form/vueDesignSystem";

export const email = useCheckLayout(
	useTextInput({ label: "Email" }),
	{
		refine: (value) => value.includes("@")
			? EE.ok()
			: EE.error("Email must contain @."),
	},
);

Use cases

• light cross-field validation;
• additional error messages;
• adding rules without rewriting the input component.