Formulaire

Le formulaire n'est pas un layout exporté sous la forme useXLayout(...), mais il joue le même rôle de forme racine.

L'API concernée est createForm(...).

Signature

ts

import { createForm } from "@duplojs/form/vue";

const useForm = createForm(templates);

Puis :

ts

const {
	component,
	check,
	currentValue,
	reset,
	dispose,
} = useForm(rootField, params);

Paramètres de createForm(...)

• templates: objet Templates contenant les templates de rendu à utiliser.

Paramètres de useForm(...)

ts

useForm(formField, {
	class?: string,
	template?: Templates["form"],
});

• formField: le FormField racine à instancier.
• class: classe CSS ajoutée au template du formulaire.
• template: surcharge locale du template form.

Valeur retournée

useForm(...) retourne :

• component: composant Vue à rendre.
• check(): validation complète du formulaire.
• currentValue: Ref de la valeur courante brute.
• reset(): remise à zéro à partir des defaultValue.
• dispose(): destruction des effets internes de l'instance.

Contrat du template form

Le template form reçoit :

Props

ts

{
	fieldKey: string;
	getCurrentValue(): unknown;
}

Emits

ts

{
	submit: [];
}

Slots

ts

{
	formField(): any;
	submitter(): any;
}

Petit exemple de template

vue

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

defineProps<FormTemplateProperties["props"]>();
defineSlots<FormTemplateProperties["slots"]>();
defineEmits<FormTemplateProperties["emits"]>();
</script>

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

		<slot name="submitter" />
	</form>
</template>

ts

import { createTemplate } from "@duplojs/form/vue";
import MyFormTemplate from "./formTemplate.vue";

export const useMyFormTemplate = createTemplate(
	"form",
	MyFormTemplate,
);

Exemple minimal

ts

import { useTextInput } from "@duplojs/form/vueDesignSystem";
import { useForm } from "./init";

export function useNewsletterForm() {
	const { component, check, currentValue, reset, dispose } = useForm(
		useTextInput({
			label: "Email",
			defaultValue: "",
		}),
	);

	return {
		NewsletterForm: component,
		checkNewsletterForm: check,
		currentNewsletterValue: currentValue,
		resetNewsletterForm: reset,
		disposeNewsletterForm: dispose,
	};
}

À retenir

• le formulaire instancie un FormField racine ;
• il délègue tout le rendu au template form ;
• il expose l'API de cycle de vie la plus haute : check, currentValue, reset, dispose.