useCheckLayout

useCheckLayout(...) ajoute une validation supplémentaire autour d'un FormField existant.

Signature

ts

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

Paramètres

• formField: champ enfant à valider.
• dataParser: validation et transformation supplémentaires appliquées après check() du champ enfant.
• refine: fonction de validation synchrone retournant EE.ok() ou EE.error(message).
• class: classe CSS ajoutée au template check.
• template: surcharge locale du template check.

Ordre de validation

useCheckLayout(...) exécute :

1. check() du champ enfant ;
2. refine(...), si présent ;
3. dataParser.parse(...), si présent.

Contrat du template check

Props

ts

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

Slots

ts

{
	formField(): any;
}

Petit exemple de template

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,
);

Exemple

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 @."),
	},
);

Cas d'usage

• validation transverse légère ;
• messages d'erreur additionnels ;
• ajout de règles sans réécrire le composant d'input.