useRepeatLayout

useRepeatLayout(...) repeats a FormField in a dynamic array.

Signature

ts

useRepeatLayout(formField, {
	max: number,
	min?: number,
	class?: string,
	template?: Templates["repeat"],
});

Parameters

• formField: repeated field.
• max: maximum number of elements.
• min: minimum number of elements. Defaults to 0.
• class: CSS class added to the repeat template.
• template: local override of the repeat template.

Produced value

• currentValue: array of values.
• check(): array of validated values.

The layout defaultValue is initialized with min occurrences of the child field defaultValue.

repeat template contract

Props

ts

{
	fieldKey: string;
	max: number;
	min: number;
	getFormFieldsQuantity(): number;
	getCurrentValue(): unknown;
	getFormFields(): VNode[];
}

Emits

ts

{
	addElement: [];
	removeElement: [index: number];
	resetElement: [index: number];
}

Slots

ts

{
	formField(): any;
}

Small template example

vue

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

type Props = (
	& RepeatTemplateProperties["props"]
	& {
		addLabel?: string;
		removeLabel?: string;
		resetLabel?: string;
	}
);

defineProps<Props>();
defineSlots<RepeatTemplateProperties["slots"]>();
defineEmits<RepeatTemplateProperties["emits"]>();
</script>

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

		<button type="button" @click="$emit('addElement')">
			Add
		</button>
	</div>
</template>

ts

import { createTemplate } from "@duplojs/form/vue";
import MyRepeatTemplate from "./repeatTemplate.vue";

export const useMyRepeatTemplate = createTemplate(
	"repeat",
	MyRepeatTemplate,
	{
		props: {
			addLabel: "Add",
			removeLabel: "Remove",
			resetLabel: "Reset",
		},
	},
);

Example

ts

import { useRepeatLayout } from "@duplojs/form/vue";
import { useTextInput } from "@duplojs/form/vueDesignSystem";

export const contacts = useRepeatLayout(
	useTextInput({ label: "Email" }),
	{
		min: 1,
		max: 3,
	},
);

Use cases

• list of emails;
• list of addresses;
• repetition of a homogeneous subform.