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.
Render dynamic forms based on JSON schema
Supports multiple field types:
Built-in validation:
Emits submitted form data
Reusable and scalable
Bootstrap integrated for styling
Follow these steps to run the project locally:
git clone https://github.com/ketanpande/dynamic-form-renderer.git
cd dynamic-form-renderer
npm install --force
ng serve
http://localhost:4200npm run test
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' }
]
};
dynamic-form-renderer/
│
├── src/
│ ├── app/
│ │ ├── dynamic-form/ # Dynamic form component
│ │ ├── schemas/ # JSON form schemas
│ │ └── app.component.* # Root component
│ └── ...
├── package.json
├── angular.json
└── README.md
npm run test.