Dynamic Form Generator

A package that dynamically generates HTML forms based on a JSON schema, including validation rules and custom styles.

Installation

npm install dynamic-form-generater

Usage

const DynamicFormGenerator = require('dynamic-form-generater');

const schema = {
  fields: [
    { name: 'firstName', label: 'First Name', type: 'text', required: true },
    { name: 'lastName', label: 'Last Name', type: 'text', required: true },
    { name: 'email', label: 'Email', type: 'email', required: true },
    { name: 'age', label: 'Age', type: 'number' },
    { name: 'gender', label: 'Gender', type: 'select', options: [
      { value: 'male', label: 'Male' },
      { value: 'female', label: 'Female' },
      { value: 'other', label: 'Other' }
    ]},
  ]
};

const formGenerator = new DynamicFormGenerator();

const form = formGenerator.generateForm(schema, (data) => {
  console.log('Form submitted:', data);
});

document.getElementById('form-container').appendChild(form);

API

generateForm(schema, submitCallback)

Generates an HTML form based on the provided JSON schema.

• schema (object): The schema for the form, including fields, labels, types, and options.
• submitCallback (function): The callback function to be executed when the form is submitted, receiving the form data as an argument.

Schema Example

The schema object should have the following structure:

{
  fields: [
    { name: 'firstName', label: 'First Name', type: 'text', required: true },
    { name: 'lastName', label: 'Last Name', type: 'text', required: true },
    { name: 'email', label: 'Email', type: 'email', required: true },
    { name: 'age', label: 'Age', type: 'number' },
    { name: 'gender', label: 'Gender', type: 'select', options: [
      { value: 'male', label: 'Male' },
      { value: 'female', label: 'Female' },
      { value: 'other', label: 'Other' }
    ]}
  ]
}

• fields (array): An array of field objects.
• name (string): The name attribute of the field.
• label (string): The label text for the field.
• type (string): The input type (e.g., text, email, number, select).
• required (boolean): Whether the field is required.
• options (array): An array of options for select fields, each with value and label.