Getting Started

The form system provides a flexible and reusable way to create forms with validation, different input types, and layouts. It's built with Vue 3 Composition API and TypeScript.

npm install @opengis/form

Basic Usage

{}

Full Name*

Email*

Country*

Оберіть значення

<template>
  <VsForm ref="form" v-model="values" :schema="schema"/>
</template>

<script setup>
  import { ref } from 'vue';
  import VsForm from "@opengis/form";
  
  const form = ref(null);
  const values = ref({});

  function Submit() {
    const error = form.value.validate(); // validate
    // save values
  };
</script>

schema

const schema = [
  {
    name: 'name',
    type: 'text',
    label: 'Full Name',
    placeholder: 'Enter your full name',
    rules: ['required'],
  },
  {
    name: 'email',
    type: 'text',
    label: 'Email',
    placeholder: 'Enter your email',
    rules: ['required', 'email'],
  },
  {
    name: 'country',
    type: 'select',
    label: 'Country',
    options: [
      { id: 'ua', text: 'Ukraine' },
      { id: 'us', text: 'United States' },
    ],
    rules: ['required'],
  },
];

add custom type

import { VForm, inputs } from '@opengis/form'

// add custom type: Slug
inputs['vs-input-slug'] = inputs.VsInputText  

// use slug 
const schema = [{
    name: 'slug',
    type: 'slug',   // ignore case. Slug, SLUG - also work
    label: 'Custom Type'
 }]

Core Concepts

1. Schema Definition

Forms are defined using a schema - an array of field configurations:

const schema = [
  {
    name: 'fieldName', // Unique identifier
    type: 'text', // Input type
    label: 'Field Label', // Display label
    rules: ['required'], // Validation rules
  },
];

2. Form State

The form system manages state through two reactive references:

const form = ref({}); // Form instance with methods
const formValues = ref({}); // Current form values

3. Validation

Validation happens automatically on form submission:

const handleSubmit = values => {
  try {
    form.value.validate(); // Validates all fields
    // Form is valid, proceed with submission
  } catch (error) {
    // Handle validation errors
    console.error('Validation failed:', error.message);
  }
};

Documentation Sections

Schema Definition

Understand how to define form schemas and field configurations.

---

Input Types

Explore all available input types: text, number, select, radio, switcher, static, and container.

---

Validation Rules

Learn about built-in and custom validation rules, error messages, and validation patterns.

---

Layouts

Discover layout options for arranging form fields: default and horizontal layouts.

---

Form Methods

Master form instance methods for validation, reset, and state management.

Best Practices

1. Start Simple: Begin with basic forms and add complexity gradually
2. Use Descriptive Names: Field names should match your data model
3. Provide Clear Labels: Help users understand what each field is for
4. Validate Appropriately: Use validation rules that make sense for your data
5. Test Thoroughly: Ensure forms work on different devices and screen sizes
6. Handle Errors Gracefully: Provide clear feedback when validation fails

Key Features

• Declarative Schema: Define forms using simple JavaScript objects
• Multiple Input Types: Support for text, number, select, radio, switcher, and more
• Flexible Validation: Built-in and custom validation rules
• Responsive Layouts: Default and horizontal layout options
• TypeScript Support: Full type safety and IntelliSense
• Vue 3 Composition API: Modern Vue.js patterns and reactivity