Form Generator

How it works

1. Instantiate — Pass a DOM container and a config object tonew FormGenerator(container, config). The constructor extendsFormComponent and immediately renders markup into the container.
2. Render steps — One wrapper (.lta-form-generator__step) is created per step. Questions for each step are placed in.lta-form-generator__question-container placeholders.
3. Mount question components — Each question's questionType maps to a dedicated component (e.g. RadioComponent, SchoolFinder,DateComponent). The component instance is stored on question.ref.
4. Collect answers — When a question changes, updateAnswers() merges the answer into formGenerator.answers keyed by [step][questionId].
5. Navigate — The Next button validates the current step viastepValidator(), then advances currentStep. On the final step, Next becomes Submit and calls submitForm().
6. Dependent questions — Radio/checkbox options can declaredependentQuestion: [ids]. When the selection changes,beforeDepChangeHandler() hides previous dependents, clears their answers, and shows new ones.

Architecture

┌─────────────────────────────────────────────────────┐
│  Page / Modal (container element)                   │
│  ┌───────────────────────────────────────────────┐  │
│  │  FormGenerator                                │  │
│  │  ├── TopBackButton / ExitButton               │  │
│  │  ├── Stepper (optional progress bar)          │  │
│  │  ├── Step 1..N (.lta-form-generator__step)    │  │
│  │  │     └── Question containers                │  │
│  │  │           └── RadioComponent, Select, …    │  │
│  │  └── Next / Submit button                     │  │
│  └───────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────┘

Config options

Public API

Answer structure

// Answers are grouped by step, then by question id:
{
  1: {
    1: { fieldName: 'addVenue', value: 'Yes', dependentQuestion: [2], ... }
  },
  2: {
    2: { fieldName: 'venue', value: { venueName: '...' }, ... }
  }
}
		

Question schema

{
  id: 1,                        // required — unique question id
  step: 1,                      // which step this question belongs to
  fieldName: 'addVenue',        // key used in API payloads
  question: 'Your venues',      // main heading
  stepperTitle: 'Your venues',  // stepper label for this step
  instructionText: 'Are you affiliated with a venue?',
  errorMessage: 'Please select an option',
  questionType: 'radio',        // see QuestionTypes
  visible: true,                // false for dependent questions shown later
  isOptional: false,
  options: [
    {
      id: 'yes',
      label: 'Yes',
      dependentQuestion: [2]     // show question id 2 when selected
    },
    {
      id: 'no',
      label: 'No',
      dependentQuestion: []
    }
  ]
}
		

Basic usage

import FormGenerator, { FormTypes } from '../../components/FormGenerator';

const container = document.querySelector('.js-my-form');

const formGenerator = new FormGenerator(container, {
  questions: stepsData,       // array of question objects (often from an API)
  totalSteps: 3,
  formType: FormTypes.StepForm,
  themeColor: 'color-lta-blue',
  isBackButtonEnabled: true,
  submitButton: {
    title: 'Submit',
    alwaysVisible: false
  }
});

formGenerator.onChange((answers) => {
  console.log('Answers updated:', answers);
});

formGenerator.onStepChange((step) => {
  console.log('Current step:', step);
});

formGenerator.onSubmit((answers, value) => {
  console.log('Form submitted:', answers, value);
});