angular-dynamic-forms-ai/README.md

AI-enhanced dynamic form generator for Angular using Template-Driven Forms

# 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

```bash
npm install angular-dynamic-forms-ai
```

## Usage

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

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

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

2. Create a form configuration in your component:

```typescript
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
```typescript
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:

```css
.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 <alpeshsharma721@gmail.com>