Form Validation Schema Grouped Fields

Grouped fields are abstract form validation schema objects that represent the validation state of a group of form inputs.

A form schema group is defined as an object containing other form schema fields or nested groups.

const { schema } = useForm<{ 
    address: {
        country: string;
        city: string;
    }
}>({
    address: {
        country: {
            value: '',
        },
        city: {
            value: '',
        }
    }
});

The schema group validation state is computed based on the validation state of the fields it contains and does not get connected directly to the form input components.

Resolved Schema

The resolved schema object looks as follows:

{
    address: {
        country: {
            value: '',
            valid: true,
            invalid: false,
            touched: false,
            untouched: true,
            dirty: false,
            pristine: true,
            errors: [],
            validators: []
        },
        city: {
            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: []
    },
    valid: true,
    invalid: false,
    touched: false,
    untouched: true,
    dirty: false,
    pristine: true,
    errors: []
}

Connecting Grouped Fields to Form Inputs

The field key is now nested inside a group. 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<{ 
    address: {
        country: string;
        city: string;
    }
}>({
    address: {
        country: {
            value: '',
        },
        city: {
            value: '',
        }
    }
});
</script>

<template>
    <IForm v-model="schema">
        <IFormGroup>
            <IInput name="address.country" />
        </IFormGroup>
        <IFormGroup>
            <IInput name="address.city" />
        </IFormGroup>
    </IForm>
</template>

Grouped Fields Operations

You can add a new field in the form schema group or root by assigning a resolved field schema to the object. Groups can be nested indefinitely and can contain any type of field.

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

schema.value.group[field] = createFormFieldSchema(fieldSchema);

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

const { schema } = useForm<{
    group: {
        firstName: string;
        lastName: string;
        email?: string;
        address?: string;
    };
}>({
    group: {
        firstName: {
            validators: [{ name: 'required' }]
        },
        lastName: {
            validators: ['required']
        }
    }
});

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

function setEmail() {
    schema.value.group.email = createFormFieldSchema({
        validators: [{ name: 'email' }]
    });
}

function setAddress() {
    schema.value.group.address = createFormFieldSchema({
        value: '32 Inkline St.'
    });
}
</script>
<template>
    <IForm v-model="schema">
        <IFormGroup name="group">
            <IFormGroup>
                <IFormLabel>First name</IFormLabel>
                <IInput name="group.firstName" placeholder="Type something.." />
                <IFormError for="group.firstName" />
            </IFormGroup>
            <IFormGroup>
                <IFormLabel>Last name</IFormLabel>
                <IInput name="group.lastName" placeholder="Type something.." />
                <IFormError for="group.lastName" />
            </IFormGroup>
            <IFormGroup v-if="schema.group.email">
                <IFormLabel>Email</IFormLabel>
                <IInput name="group.email" placeholder="Type something.." />
                <IFormError for="group.email" />
            </IFormGroup>
            <IFormGroup v-if="schema.group.address">
                <IFormLabel>Address</IFormLabel>
                <IInput name="group.address" placeholder="Type something.." />
                <IFormError for="group.address" />
            </IFormGroup>
        </IFormGroup>
        <IFormGroup>
            <IButton type="button" @click="setEmail"> Set Email </IButton>&nbsp;
            <IButton type="button" @click="setAddress"> Set Address </IButton>&nbsp;
        </IFormGroup>
    </IForm>

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

You can use options.group to specify whether the value being set is a group of fields. If not specified or set to false, the field will be a standalone field.