FormSchema Native

Vue component form based on JSON Schema and Native HTML

Table of Contents

• Install
• Demo
• Usage
• Features
• Supported Keywords
• Irrelevant (ignored) Keywords
• FormSchema API
  • Props
  • Events
  • Methods
    • form()
• Working with Async Schema
• Working with Vue Router
• Workind with JSON Schema $ref Pointers
• Data Validation
  • Native HTML5 Validation
  • Custom Validation API
  • Custom Validation with AJV
  • Disable Native HTML5 Validation
    • Example: Disable Form Validation using novalidate
    • Usecase: Implement Save, Cancel and Submit
• Labels Translation
• Render Form Elements
  • Textarea
  • File Input
  • Hidden Input
  • Password Input
  • Multiple Checkbox
  • Grouped Radio
  • Select Input
  • Array Input
  • Regex Input
  • Fieldset Element
• Custom Form Elements
  • Elements API
  • Custom Elements Example
• Descriptor Interface
• Usecases
  • Grouping fields
• Contributing
• License

Install

npm install --save @formschema/native

Demo

• Demo with ElementUI

Usage

<template>
  <FormSchema :schema="schema" v-model="model" @submit.prevent="submit">
    <button type="submit">Subscribe</button>
  </FormSchema>
</template>

<script>
  import FormSchema from '@formschema/native'
  import schema from './schema/newsletter-subscription.json'

  export default {
    data: () => ({
      schema: schema,
      model: {}
    }),
    methods: {
      submit (e) {
        // this.model contains the valid data according your JSON Schema.
        // You can submit your model to the server here
      }
    },
    components: { FormSchema }
  }
</script>

Features

• Keywords for Applying Subschemas With Boolean Logic
• Validation Keywords for Any Instance Type<br> FormSchema uses:
  • HTML input text to render schema with type: 'string'
  • HTML input number to render schema with type: 'number' | 'integer'
  • HTML input hidden to render schema with type: 'null'
  • HTML input checkbox to render schema with type: 'boolean'
• Validation Keywords for Numeric Instances (number and integer)<br> FormSchema parses keywords maximum, minimum, exclusiveMaximum and exclusiveMinimum to generate HTML attributes max and min.
• Validation Keywords for Strings<br> FormSchema parses keywords maxLength, minLength, pattern to generate HTML attributes maxlength, minlength and pattern.
• Validation Keywords for Arrays
• Semantic Validation With "format"<br> FormSchema uses:
  • HTML input date to render schema with format: 'date'
  • HTML input datetime-local to render schema with format: 'date-time'
  • HTML input email to render schema with format: 'email' | 'idn-email'
  • HTML input time to render schema with format: 'time'
  • HTML input url to render schema with format: 'uri'
• String-Encoding Non-JSON Data
• Property dependencies and Schema dependencies
• Schema Re-Use With "definitions" (see JSON Schema $ref Pointers)
• Schema Annotations

Supported Keywords

• type is only supported string value. Array type definition is not supported.
• enum is used to render multiple choices input
• maximum, exclusiveMaximum, minimum and exclusiveMinimum are used to render numeric fields
• multipleOf is used to render the input attribute step
• maxLength, minLength, pattern and const are used to render string fields
• items, additionalItems, maxItems, minItems and uniqueItems are used to render array fields
• dependencies is used to implement Property dependencies and Schema dependencies
• contentEncoding
• contentMediaType<br>
  • When contentMediaType is equal to text/*, the HTML element <textarea/> is used for rendering
  • When contentMediaType is not equal to text/*, the HTML element <input/> with attributes { type: file, accept: contentMediaType } is used for rendering
• title is used to render the input label
• description is used to render the input description
• default is used to define the default input value
• readOnly is used to render a field as an read-only input

Irrelevant (ignored) Keywords

Since FormSchema is just a form generator, some JSON Schema validation keywords are irrelevant:

• contains
• maxProperties
• minProperties
• patternProperties
• additionalProperties
• propertyNames
• not
• writeOnly
• examples

FormSchema API

Props

| Name | Type | Description