Inkline
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. From the Introduction page we've learned:
- The schema object provides form validation status fields such as
valid,invalid,touched,untouched,dirty,pristineanderrors. - The
<i-form>component needs to receive theformobject as aschema - Each child input needs to receive the
form.inputNameas aschemaandform.inputName.valueas av-model
Using the validators field, you can specify an array of validators to be used on the input.
If needed, you can change the reserved validation keywords / field names by updating the Plugin Options.
Input Default Value
Providing a default value for a schema field can be done using the value field as follows:
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 Event
By using the validateOn field you can specify the event that triggers the validation. The most common events are input and blur.
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.
Array Form Groups
Form groups can be an Array of fields, allowing you to loop over them using v-for.
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: