Angular Dynamic Forms AI

A powerful, AI-enhanced dynamic form generator for Angular using Template-Driven Forms.

Features

• 🎯 JSON-Based Form Structure
• 🎨 Template-Driven Forms Approach
• 🤖 AI-Powered Validation
• 🔄 Auto-Generated Form Fields
• ⚡ Real-Time Error Messages
• 🔍 Conditional Fields
• 📝 Pre-filled Values
• ♿ Accessibility & Responsive Design
• 🎨 Dynamic Error Styling
• 🚀 Lightweight & Easy to Use

Installation

npm install angular-dynamic-forms-ai

Usage

1. Import the module in your app.module.ts:

import { DynamicFormsModule } from 'angular-dynamic-forms-ai';

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

2. Create a form configuration in your component:

import { FormConfig } from 'angular-dynamic-forms-ai';

@Component({
  selector: 'app-my-form',
  template: `
    <lib-dynamic-form
      [formConfig]="formConfig"
      (formSubmit)="onSubmit($event)">
    </lib-dynamic-form>
  `
})
export class MyFormComponent {
  formConfig: FormConfig = {
    fields: [
      {
        name: 'email',
        label: 'Email Address',
        type: 'email',
        placeholder: 'Enter your email'
      },
      {
        name: 'password',
        label: 'Password',
        type: 'password',
        placeholder: 'Enter your password'
      },
      {
        name: 'country',
        label: 'Country',
        type: 'select',
        options: [
          { label: 'USA', value: 'usa' },
          { label: 'Canada', value: 'canada' }
        ]
      },
      {
        name: 'state',
        label: 'State',
        type: 'select',
        options: [
          { label: 'California', value: 'ca' },
          { label: 'New York', value: 'ny' }
        ],
        conditionalDisplay: {
          dependsOn: 'country',
          showWhen: 'usa'
        }
      }
    ],
    submitButton: {
      text: 'Submit',
      class: 'custom-submit-button'
    }
  };

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

Form Configuration Options

Field Types

• text: Regular text input
• email: Email input with validation
• password: Password input with security validation
• number: Numeric input
• select: Dropdown selection
• textarea: Multiline text input

Field Properties

interface FormFieldConfig {
  name: string;           // Field identifier
  label: string;          // Display label
  type: string;           // Input type
  value?: any;           // Default value
  placeholder?: string;   // Placeholder text
  options?: {            // For select fields
    label: string;
    value: any;
  }[];
  validations?: {        // Validation rules
    required?: boolean;
    minLength?: number;
    maxLength?: number;
    pattern?: string;
    email?: boolean;
  };
  conditionalDisplay?: { // Show/hide based on other field
    dependsOn: string;
    showWhen: any;
  };
  errorMessages?: {      // Custom error messages
    [key: string]: string;
  };
}

AI Validation Features

The package automatically applies intelligent validation rules based on field names:

• Email fields: Validates email format
• Password fields: Requires minimum length and complexity
• Phone fields: Validates phone number format
• URL fields: Validates URL format
• Name fields: Requires minimum length
• Zip code fields: Validates postal code format

Styling

The package includes default styles that are responsive and accessible. You can override these styles using CSS classes:

.dynamic-form { /* Main form container */ }
.form-field { /* Field container */ }
.form-label { /* Field label */ }
.form-input { /* Input fields */ }
.form-select { /* Select dropdowns */ }
.form-textarea { /* Textarea fields */ }
.error { /* Error state for fields */ }
.error-messages { /* Error message container */ }
.submit-button { /* Submit button */ }

Accessibility

All form elements are ARIA-compliant and include:

• Proper labeling
• Error messaging
• Focus management
• Screen reader support
• Keyboard navigation

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Author

Alpesh Sharma [email protected]