Form Schema

The form validation schema defines the form input fields, groups and how they work together.

Schema Example

The <i-form> component and all input components have a schema property that can be used to provide form schema validation. The schema object provides form validation status fields such as valid, invalid, touched, untouched, dirty, pristine and errors.

The <i-form> component needs to take the form itself as a schema. Each input needs to take the form.inputName as a schema and form.inputName.value as a model. This will ensure that form validation is working properly.

Using the validators field, you can specify an array of validators to be used on the input.

Form Schema Example

The following keywords are reserved for validation purpopses and cannot be used as field names:
name, fields, validate, validateOn, validators, invalid, valid, touch, touched, untouched, dirty, pristine, set, add, remove, errors.

Input Default Value

Providing a default value for a schema field can be done using the value field as follows:

Form Schema Input Default Value

Input Validation Message

Each validator accepts a custom error message using the message field. This allows you to use i18n to display error messages.

Input Validation Message

Input Validation Event

By using the validateOn field you can specify the event that triggers the validation. The most common events are input and blur.

Input Validation Events

Schema Groups

You can define schema groups to determine the validation of a group of inputs.

Object Form Groups

Objects that aren't empty and don't have a value or validators field are treated as form groups. Form groups can be used to see the validation status of specific fields.

Form Schema Form Groups
Array Form Groups

Form groups can be an Array of fields, allowing you to loop over them using v-for.

Form Schema Array Form Groups

Complete Form Example

The <i-form> component and all input components have a schema property that can be used to provide form schema validation. The schema object provides form validation status fields such as valid, invalid, touched, untouched, dirty, pristine and errors.

The schema object this.form contains the validation state of the <i-form>, and is updated as soon as the input changes. The object looks as seen in the Output tab:

Complete Form Example