Angular Dynamic Form Library

A flexible and reusable dynamic form component for Angular applications that allows you to create forms programmatically using configuration objects.

Features

• 🚀 Dynamic Form Generation: Create forms from configuration objects
• 📱 Responsive Layouts: Support for vertical, horizontal, and grid layouts
• 🎨 Customizable Styling: Easy to customize with CSS classes
• ✅ Built-in Validation: Comprehensive validation support
• 🔄 Reactive Forms: Built on Angular Reactive Forms
• 🎯 Multiple Field Types: Text, email, number, textarea, select, multiselect, checkbox, radio, date, file, and more
• 🌐 API Integration: Load select options from APIs
• 📦 NPM Package: Easy to install and use

Installation

npm install @ravisavaj/angular-dynamic-form

Quick Start

1. Import the Module

import { DynamicFormModule } from '@ravisavaj/angular-dynamic-form';

@NgModule({
  imports: [
    DynamicFormModule,
    // ... other imports
  ]
})
export class AppModule { }

2. Use the Component

import { DynamicFormComponent, FormConfig } from '@ravisavaj/angular-dynamic-form';

@Component({
  selector: 'app-my-form',
  template: `
    <lib-dynamic-form
      [config]="formConfig"
      (formSubmit)="onSubmit($event)"
      (formCancel)="onCancel()">
    </lib-dynamic-form>
  `
})
export class MyFormComponent {
  formConfig: FormConfig = {
    fields: [
      {
        name: 'firstName',
        label: 'First Name',
        type: 'text',
        required: true,
        placeholder: 'Enter your first name'
      },
      {
        name: 'email',
        label: 'Email',
        type: 'email',
        required: true,
        placeholder: 'Enter your email'
      }
    ],
    submitButtonText: 'Submit',
    showSubmitButton: true
  };

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

  onCancel() {
    console.log('Form cancelled');
  }
}

Field Types

Text Input

{
  name: 'firstName',
  label: 'First Name',
  type: 'text',
  required: true,
  placeholder: 'Enter your first name',
  minLength: 2,
  maxLength: 50
}

Email Input

{
  name: 'email',
  label: 'Email Address',
  type: 'email',
  required: true,
  placeholder: 'Enter your email'
}

Number Input

{
  name: 'age',
  label: 'Age',
  type: 'number',
  min: 18,
  max: 100,
  placeholder: 'Enter your age'
}

Textarea

{
  name: 'bio',
  label: 'Biography',
  type: 'textarea',
  rows: 4,
  placeholder: 'Tell us about yourself'
}

Select

{
  name: 'country',
  label: 'Country',
  type: 'select',
  options: [
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' }
  ]
}

Multiselect

{
  name: 'skills',
  label: 'Skills',
  type: 'multiselect',
  options: [
    { value: 'angular', label: 'Angular' },
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue.js' }
  ]
}

Checkbox

{
  name: 'newsletter',
  label: 'Subscribe to newsletter',
  type: 'checkbox'
}

Date Input

{
  name: 'birthDate',
  label: 'Date of Birth',
  type: 'date'
}

Layout Options

Vertical Layout (Default)

{
  layout: 'vertical',
  fields: [...]
}

Horizontal Layout

{
  layout: 'horizontal',
  fields: [...]
}

Grid Layout

{
  layout: 'grid',
  columns: 12,
  fields: [
    {
      name: 'firstName',
      gridColumnSpan: 6  // Takes 6 columns
    },
    {
      name: 'lastName',
      gridColumnSpan: 6  // Takes 6 columns
    }
  ]
}

API Integration

Load select options from APIs using the DynamicOptionsService:

import { DynamicOptionsService } from '@ravisavaj/angular-dynamic-form';

@Component({...})
export class MyComponent {
  constructor(private optionsService: DynamicOptionsService) {}

  loadCountries() {
    this.optionsService.loadOptions({
      endpoint: '/api/countries',
      valueField: 'id',
      labelField: 'name'
    }).subscribe(options => {
      // Use options in your form config
    });
  }
}

Validation

Built-in Validators

• required: Field is required
• minLength: Minimum character length
• maxLength: Maximum character length
• min: Minimum value (for numbers)
• max: Maximum value (for numbers)
• pattern: Regular expression pattern
• email: Email format validation

Custom Validation

{
  name: 'username',
  label: 'Username',
  type: 'text',
  customValidation: (control) => {
    if (control.value && control.value.length < 3) {
      return { minLength: { requiredLength: 3 } };
    }
    return null;
  }
}

Custom Error Messages

{
  name: 'email',
  label: 'Email',
  type: 'email',
  validationMessages: {
    required: 'Email is required',
    email: 'Please enter a valid email address'
  }
}

Events

The component emits several events:

• formSubmit: When the form is submitted (with form data)
• formCancel: When the cancel button is clicked
• formChange: When any field value changes
• fieldChange: When a specific field changes
• validationError: When validation errors occur

Styling

The component uses CSS classes that you can customize:

.dynamic-form {
  /* Main form container */
}

.form-group {
  /* Individual field container */
}

.form-label {
  /* Field labels */
}

.form-control {
  /* Input fields */
}

.error-message {
  /* Validation error messages */
}

.btn-primary {
  /* Submit button */
}

.btn-secondary {
  /* Cancel button */
}

Examples

See the examples folder for complete working examples:

import { basicFormConfig } from '@ravisavaj/angular-dynamic-form';

// Use the basic form configuration
formConfig = basicFormConfig;

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

• GitHub Issues: Report bugs or request features
• Documentation: Full documentation