Dynamic Form Renderer

ketanpande

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.

Download

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

Top categories