Angular Dynamic Forms Library

JSON-driven dynamic forms for Angular with Reactive Forms.

Features

✅ 19+ field types | ✅ JSON config | ✅ Reactive Forms | ✅ Built-in validation | ✅ Conditional fields | ✅ TypeScript

Install

npm install lib-dynamic-forms

Usage

1. Import Module

import { DynamicForm } from 'dynamic-forms';

@NgModule({
  imports: [DynamicForm]
})
export class AppModule { }

2. Define Form

import { FieldConfig, DynamicForm } from 'dynamic-forms';

export class MyComponent {
  formConfig: FieldConfig[] = [
    {
      name: 'username',
      type: 'text',
      label: 'Username',
      validators: [{ name: 'required' }]
    },
    {
      name: 'email',
      type: 'email',
      label: 'Email',
      validators: [
        { name: 'required' },
        { name: 'email', message: 'Invalid email' }
      ]
    },
    {
      name: 'password',
      type: 'password',
      label: 'Password',
      validators: [
        { name: 'required' },
        { name: 'minLength', value: 8 }
      ]
    },
    {
      name: 'country',
      type: 'select',
      label: 'Country',
      options: [
        { label: 'USA', value: 'US' },
        { label: 'UK', value: 'UK' }
      ]
    },
    {
      name: 'agree',
      type: 'checkbox',
      label: 'I agree to terms',
      validators: [{ name: 'required' }]
    }
  ];

  onSubmit(data: any) {
    console.log('Form submitted:', data);
  }
}

3. Use Component

 <lib-dynamic-form
  [fields]="formConfig"
  [submitButtonText]="'Register'"
  [resetButtonText]="'Clear'"
  [showResetButton]="true"
  (formSubmit)="onSubmit($event)"
  (formChange)="onChange($event)"
  (formReset)="onReset()">
</lib-dynamic-form>

Field Types

text | email | password | number | tel | url | textarea | select | radio | checkbox | date | time | file

Validators

required | email | minLength | maxLength | min | max | pattern

Conditional Fields

{
  name: 'company',
  type: 'text',
  label: 'Company Name',
  showIf: {
    field: 'accountType',
    operator: '==',
    value: 'business'
  }
}

Custom Validation Messages

{
  name: 'email',
  type: 'email',
  label: 'Email',
  validators: [
    { name: 'required', message: 'Email is required' },
    { name: 'email', message: 'Enter valid email' }
  ]
}

API

Inputs

| Input | Type | Default | |-------|------|---------| | fields | FieldConfig[] | [] | | submitButtonText | string | 'Submit' | | resetButtonText | string | 'Reset' | | showResetButton | boolean | true |

Outputs

| Output | Emits | |--------|-------| | formSubmit | Form value (if valid) | | formChange | Form value (on change) | | formReset | void |

Browser Support

Chrome | Firefox | Safari | Edge (latest versions)

Angular Compatibility

Angular 17+ (17, 18, 19, 20)

Optional: Angular Material styling

This library's demo and example DynamicForm component were updated to demonstrate Angular Material-based controls. To use the Material-styled controls you should install the Material packages and enable animations in your application:

npm install @angular/material @angular/cdk @angular/animations --save
ng add @angular/material

After running the schematic, ensure your app provides animations (the demo app uses importProvidersFrom(BrowserAnimationsModule) in projects/demo/src/app/app.config.ts). The library's components import Material modules locally, so no additional module wiring in your host app is required beyond installing the packages and providing animations.

If you do not install Angular Material, the library will continue to work using native controls and the library's CSS.

License

MIT

Links

• GitHub
• NPM
• Issues

Support

⭐ If helpful, please star the repo!

Issues? Open an issue