npm package: @savajravi/angular-dynamic-form
Description: A powerful and flexible dynamic form component for Angular applications
Author: Ravi Savaj
Latest version: 1.0.1

# 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

```bash
npm install @ravisavaj/angular-dynamic-form
```

## Quick Start

### 1. Import the Module

```typescript
import { DynamicFormModule } from '@ravisavaj/angular-dynamic-form';

@NgModule({
  imports: [
    DynamicFormModule,
    // ... other imports
  ]
})
export class AppModule { }
```

### 2. Use the Component

```typescript
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
```typescript
{
  name: 'firstName',
  label: 'First Name',
  type: 'text',
  required: true,
  placeholder: 'Enter your first name',
  minLength: 2,
  maxLength: 50
}
```

### Email Input
```typescript
{
  name: 'email',
  label: 'Email Address',
  type: 'email',
  required: true,
  placeholder: 'Enter your email'
}
```

### Number Input
```typescript
{
  name: 'age',
  label: 'Age',
  type: 'number',
  min: 18,
  max: 100,
  placeholder: 'Enter your age'
}
```

### Textarea
```typescript
{
  name: 'bio',
  label: 'Biography',
  type: 'textarea',
  rows: 4,
  placeholder: 'Tell us about yourself'
}
```

### Select
```typescript
{
  name: 'country',
  label: 'Country',
  type: 'select',
  options: [
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' }
  ]
}
```

### Multiselect
```typescript
{
  name: 'skills',
  label: 'Skills',
  type: 'multiselect',
  options: [
    { value: 'angular', label: 'Angular' },
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue.js' }
  ]
}
```

### Checkbox
```typescript
{
  name: 'newsletter',
  label: 'Subscribe to newsletter',
  type: 'checkbox'
}
```

### Date Input
```typescript
{
  name: 'birthDate',
  label: 'Date of Birth',
  type: 'date'
}
```

## Layout Options

### Vertical Layout (Default)
```typescript
{
  layout: 'vertical',
  fields: [...]
}
```

### Horizontal Layout
```typescript
{
  layout: 'horizontal',
  fields: [...]
}
```

### Grid Layout
```typescript
{
  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`:

```typescript
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
```typescript
{
  name: 'username',
  label: 'Username',
  type: 'text',
  customValidation: (control) => {
    if (control.value && control.value.length < 3) {
      return { minLength: { requiredLength: 3 } };
    }
    return null;
  }
}
```

### Custom Error Messages
```typescript
{
  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:

```css
.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:

```typescript
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](https://github.com/ravi-savaj/angular-dynamic-form/issues)
- Documentation: [Full documentation](https://github.com/ravi-savaj/angular-dynamic-form#readme)