ttech-ngx-dynamic-forms

A flexible, lightweight Angular library for building dynamic forms with your own custom components.

✨ Features

• 🎨 Bring Your Own Components - Use any UI framework (Material, PrimeNG, Bootstrap, etc.)
• 🔧 Type-Safe - Full TypeScript support
• 📦 Lightweight - No UI dependencies
• 🚀 Modern Angular - Built with Angular 17+ signals and standalone components
• ✅ Validation - Built-in Angular validators support

📦 Installation

npm install ttech-ngx-dynamic-forms

🚀 Quick Start

1. Create Your Custom Input Component

import { Component, input } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { FormField } from 'ttech-ngx-dynamic-forms';

@Component({
  selector: 'app-input',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <label>{{ field().label }}</label>
    <input [formControl]="control()" [type]="field().type || 'text'" />
  `
})
export class CustomInputComponent {
  readonly control = input.required<FormControl>();
  readonly field = input.required<FormField>();
}

2. Register Your Components

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { DYNAMIC_FORM_CONFIG } from 'ttech-ngx-dynamic-forms';
import { CustomInputComponent } from './components/custom-input.component';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: DYNAMIC_FORM_CONFIG,
      useValue: {
        components: {
          textbox: CustomInputComponent,
          email: CustomInputComponent
        }
      }
    }
  ]
};

3. Use the Dynamic Form

import { Component } from '@angular/core';
import { DynamicFormComponent, FormField } from 'ttech-ngx-dynamic-forms';

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [DynamicFormComponent],
  template: `
    <ngx-dynamic-form
      [fields]="formFields"
      (formSubmit)="onSubmit($event)"
    />
  `
})
export class FormComponent {
  formFields: FormField[] = [
    {
      key: 'email',
      label: 'Email',
      controlType: 'email',
      type: 'email',
      required: true
    }
  ];

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

📖 API

FormField Interface

interface FormField {
  key: string;
  label: string;
  controlType: string;
  type?: string;
  placeholder?: string;
  required?: boolean;
  value?: any;
  minLength?: number;
  maxLength?: number;
  min?: number;
  max?: number;
  pattern?: string;
  options?: SelectOption[];
  customProps?: Record<string, any>;
  onValueChange?: (value: any) => void;
}

DynamicFormComponent

@Input() fields: FormField[];
@Input() showSubmitButton = true;
@Input() submitButtonText = 'Submit';
@Output() formSubmit: EventEmitter<any>;
@Output() formValueChange: EventEmitter<any>;

💡 Why This Library?

• ✅ Your Design - Use your own components and styles
• ✅ Any Framework - Works with Material, PrimeNG, Bootstrap, custom CSS
• ✅ Type Safety - Full TypeScript support
• ✅ No Bloat - Only form logic, no UI

📄 License

MIT

🔗 Links

• NPM
• GitHub