Form Validation Schema Repeater Fields

Repeater fields are abstract form validation schema objects that represent the validation state of an array of form inputs.

A form schema repeater field group is defined as an array containing other form schema fields or groups.

const { schema } = useForm<{ 
    items: string[]
}>({
    items: [
        {
            value: '',
        }
    ]
});

Resolved Schema

The resolved schema object looks as follows:

{
    items: [
        {
            value: '',
            valid: true,
            invalid: false,
            touched: false,
            untouched: true,
            dirty: false,
            pristine: true,
            errors: [],
            validators: []
        }
    ],
    valid: true,
    invalid: false,
    touched: false,
    untouched: true,
    dirty: false,
    pristine: true,
    errors: []
}

Connecting Repeater Fields to Form Inputs

The field key is now the item index of the array. We will use the field key path to connect to the form input components using the name prop.

<script lang="ts" setup>
const { schema } = useForm<{
    items: string[]
}>({
    items: [
        {
            value: '',
        }
    ]
});
</script>

<template>
    <IForm v-model="schema">
        <IFormGroup v-for="(item, index) in items" :key="index">
            <IInput :name="`items.${index}`" />
        </IFormGroup>
    </IForm>
</template>

Repeater Fields Operations

To update repeater field items, you can use standard array methods. These two methods will take care of registering events and making sure your form schema is always up-to-date:

• push to add a resolved field schema to the array

schema.value.items.push(createFormFieldSchema(fieldSchema));

• splice to remove or replace resolved form field schemas from the array.

schema.value.items.splice(0, 1, createFormFieldSchema(fieldSchema));

Repeater fields can contain both fields and groups. To resolve a field schema, you can use the following methods:

• Field schemas are resolved using the createFormFieldSchema() method
• Grouped field schemas are resolved using the createSchema() method
• Repeater field schemas are resolved using the createFormArraySchema() method

<script lang="ts" setup>
import { useForm } from '@inkline/inkline/composables';
import { computed } from 'vue';
import { createFormFieldSchema } from '@inkline/inkline';

const { schema } = useForm<{
    items: string[];
}>({
    items: [
        {
            validators: [{ name: 'required' }]
        },
        {
            validators: ['required']
        }
    ]
});

const prettySchema = computed(() => {
    return JSON.stringify(schema.value, null, 4);
});

function addField() {
    const newField = createFormFieldSchema({
        value: 'Added Field',
        validators: [{ name: 'required' }]
    });

    schema.value.items.push(newField);
}

function removeField() {
    schema.value.items.splice(0, 1);
}

function replaceField() {
    const newField = createFormFieldSchema({
        value: 'Spliced Field',
        validators: [{ name: 'required' }]
    });

    schema.value.items.splice(0, 1, newField);
}
</script>
<template>
    <IForm v-model="schema">
        <IFormGroup>
            <IFormGroup v-for="(item, index) in schema.items" :key="index">
                <IFormLabel>
                    Input for <code>items.{{ index }}</code>
                </IFormLabel>
                <IInput :name="`items.${index}`" placeholder="Type something.." />
                <IFormError :for="`items.${index}`" />
            </IFormGroup>
        </IFormGroup>
        <IFormGroup>
            <IButton type="button" @click="addField"> Add </IButton>&nbsp;
            <IButton type="button" @click="removeField"> Remove First </IButton>&nbsp;
            <IButton type="button" @click="replaceField"> Replace First </IButton>
        </IFormGroup>
    </IForm>

    <pre class="_margin-top:1">{{ prettySchema }}</pre>
</template>