dynamic-form-renderer Svelte Themes

Dynamic Form Renderer

Create a Dynamic Form Component in a front-end framework of your choice (e.g., Angular, React, Vue, Svelte, etc.) that renders form fields based on a configurable JSON schema. The component should support multiple field types, apply validation rules, and be designed for reusability and scalability across different forms.

Dynamic Form Renderer - Angular 19

A reusable dynamic form component built with Angular 19 that renders forms based on configurable JSON schemas. Supports multiple field types, validations, and is fully reusable across different forms.


Features

  • Render dynamic forms based on JSON schema

  • Supports multiple field types:

    • Text (single-line)
    • Textarea (multi-line)
    • Date picker
    • Dropdown (single-select)
    • Multi-select (checkbox list)
    • Checkbox
  • Built-in validation:

    • Required fields
    • Pattern-based validation (e.g., email)
  • Emits submitted form data

  • Reusable and scalable

  • Bootstrap integrated for styling


Getting Started

Follow these steps to run the project locally:

1. Clone the repository

git clone https://github.com/ketanpande/dynamic-form-renderer.git
cd dynamic-form-renderer

2. Install dependencies

npm install --force

3. Run the application

ng serve
  • Open your browser at http://localhost:4200

4. Run Unit Tests

npm run test

Usage

The dynamic form component can be used in any Angular component:

<app-dynamic-form
  [schema]="activeSchema"
  (submitForm)="onSubmit($event)">
</app-dynamic-form>

Example schema:

export const USER_REGISTRATION_SCHEMA = {
  title: 'User Registration',
  fields: [
    { label: 'Full Name', name: 'fullName', type: 'text', required: true },
    {
      label: 'Email',
      name: 'email',
      type: 'text',
      required: true,
      validation: {
        pattern: '^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$',
        message: 'Invalid email address'
      }
    },
    { label: 'Date of Birth', name: 'dob', type: 'date' },
    { label: 'Gender', name: 'gender', type: 'dropdown', options: ['Male', 'Female', 'Other'], required: true },
    { label: 'Hobbies', name: 'hobbies', type: 'multiselect', options: ['Reading', 'Sports', 'Music', 'Travel'] },
    { label: 'Subscribe to newsletter', name: 'subscribe', type: 'checkbox' },
    { label: 'About Yourself', name: 'about', type: 'textarea' }
  ]
};

Folder Structure

dynamic-form-renderer/
│
├── src/
│   ├── app/
│   │   ├── dynamic-form/       # Dynamic form component
│   │   ├── schemas/            # JSON form schemas
│   │   └── app.component.*     # Root component
│   └── ...
├── package.json
├── angular.json
└── README.md

Styling

  • The project uses Bootstrap for styling.
  • Form fields, buttons, and error messages are styled with Bootstrap classes for a clean, responsive UI.

Notes

  • The dynamic form component is reusable — simply provide a new schema to render a different form.
  • JSON schema defines the form structure, field types, labels, validation rules, and options.
  • Jest Unit tests are included and can be run via npm run test.
  • Added JS Doc format comments in the code for more readability.
  • Used OnPush Change Detection strategy in the dynamic form component.
  • Added trackBy in *ngFor loop

Output

image

Top categories

Loading Svelte Themes