Form Validation - Methods

The form validation framework wouldn’t be complete without dynamically added fields and groups.

Inkline provides a simple API for adding and removing fields.

Object Group Operations

Objects can be manipulated and kept up to date using the standard Object API.

To enable error handling and reactivity, we’ll need to call this.$inkline.form() or useForm() for the newly added schema.

this.form.group[field] = this.$inkline.form(fieldSchema);
this.form.group[field] = useForm(fieldSchema);

   
<i-form v-model="schema">
    <i-form-group name="group">
        <i-form-group>
            <i-form-label>First name</i-form-label>
            <i-input name="firstName" placeholder="Type something.." />
            <i-form-error for="firstName" />
        </i-form-group>
        <i-form-group>
            <i-form-label>Last name</i-form-label>
            <i-input name="lastName" placeholder="Type something.." />
            <i-form-error for="lastName" />
        </i-form-group>
        <i-form-group v-if="schema.group.email">
            <i-form-label>Email</i-form-label>
            <i-input name="email" placeholder="Type something.." />
            <i-form-error for="email" />
        </i-form-group>
        <i-form-group v-if="schema.group.address">
            <i-form-label>Address</i-form-label>
            <i-input name="address" placeholder="Type something.." />
            <i-form-error for="address" />
        </i-form-group>
    </i-form-group>
    <i-form-group>
        <i-button @click="setEmail" type="button">Set Email</i-button>&nbsp;
        <i-button @click="setAddress" type="button">Set Address</i-button>&nbsp;
    </i-form-group>
</i-form>

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.

Array Group Operations

Inkline allows you to use standard Array methods for Array group operations, such as push andsplice. These two methods will take care of registering events and making sure your form schema is always up to date.

this.form.group.push(this.$inkline.form(fieldSchema));
this.form.group.push(useForm(fieldSchema));

this.form.group.splice(0, 1, this.$inkline.form(fieldSchema));
this.form.group.splice(0, 1, useForm(fieldSchema));

    
<i-form v-model="schema">
    <i-form-group name="group">
        <i-form-group v-for="(field, index) in schema.group">
            <i-form-label>Input {{index}}</i-form-label>
            <i-input :name="`${index}`" placeholder="Type something.." />
            <i-form-error :for="`${index}`" />
        </i-form-group>
    </i-form-group>
    <i-form-group>
        <i-button @click="addField" type="button">Add</i-button>&nbsp;
        <i-button @click="removeField" type="button">Remove First</i-button>&nbsp;
        <i-button @click="replaceField" type="button">Replace First</i-button>
    </i-form-group>
</i-form>

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