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

<template>
  <VsForm
    v-model:form="form"    
    :schema="schema"
    @handle-submit="handleSubmit"
  />
</template>

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

  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'],
    },
  ];

  const handleSubmit = values => {
    console.log('Form submitted:', values);
  };
</script>

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