@vanshasomani/generic-form

A reusable, configurable Angular form component built using Angular Material. This library allows developers to generate dynamic forms based on a configuration object using @angular/forms and the power of custom components like @vanshasomani/generic-input.

✨ Features

• Config-driven form rendering
• Supports all standard Angular Material input types
• Built-in support for:
  • Validation
  • Custom error messages
  • Checkbox, Radio, Select, Textarea, Password, and more
• Two-way syncing with external FormControl
• Designed for clean integration with Angular Material UI
• Supports multiple input types:
  • text
  • password
  • email
  • textarea
  • select
  • radio
  • checkbox

📦 Installation

npm install @vanshasomani/generic-form @vanshasomani/generic-input

🚀 Usage
1. Import Module (Standalone Component)
No need to create a separate module — GenericForm is a standalone component.

ts
Copy
Edit
import { GenericForm } from '@vanshasomani/generic-form';

@Component({
  standalone: true,
  imports: [GenericForm],
  ...
})
2. Template Usage
html
Copy
Edit
<lib-generic-form
  [config]="formConfig"
  (submitted)="onSubmit($event)"
  (cancelled)="onCancel()"
></lib-generic-form>
3. Define Config in Component
ts
Copy
Edit
import { GenericFormInterface } from '@vanshasomani/generic-form';
import { Validators } from '@angular/forms';

formConfig: GenericFormInterface = {
  fields: [
    {
      type: 'text',
      name: 'firstName',
      label: 'First Name',
      placeholder: 'Enter your first name',
      appearance: 'outline',
      id: 'firstName',
      showRequiredStar: true,
      customValidators: [Validators.required],
      customErrorMessages: {
        required: 'First name is required'
      }
    },
    {
      type: 'email',
      name: 'email',
      label: 'Email',
      placeholder: 'Enter your email',
      appearance: 'outline',
      id: 'email',
      customValidators: [Validators.required, Validators.email]
    },
    {
      type: 'select',
      name: 'gender',
      label: 'Gender',
      placeholder: 'Select gender',
      appearance: 'fill',
      id: 'gender',
      options: [
        { label: 'Male', value: 'M' },
        { label: 'Female', value: 'F' }
      ]
    }
  ],
  submitButtonLabel: 'Register',
  cancelButtonLabel: 'Clear'
};

📤 Outputs
| Output      | Description                             |
| ----------- | --------------------------------------- |
| `submitted` | Emits the form value on valid submit    |
| `cancelled` | Emits when the cancel button is clicked |

🔧 Form Field Configuration
Each field inside fields: GenericInputInterface[] can have:

| Property              | Type                                              | Description                         |                             |
| --------------------- | ------------------------------------------------- | ----------------------------------- | --------------------------- |
| `type`                | `string`                                          | Input type (`text`, `select`, etc.) |                             |
| `name`                | `string`                                          | Form control name                   |                             |
| `label`               | `string`                                          | Label for the field                 |                             |
| `placeholder`         | `string`                                          | Placeholder text                    |                             |
| `id`                  | `string`                                          | HTML id                             |                             |
| `appearance`          | `'outline' \| 'fill'`                             | Angular Material appearance         |                             |
| `showRequiredStar`    | `boolean`                                         | Show `*` for required fields        |                             |
| `disabled`            | `boolean`                                         | Disable input                       |                             |
| `rows`                | `number`                                          | Textarea row size                   |                             |
| `options`             | `{ label: string; value: string }[]`              | For select and radio fields         |                             |
| `value`               | `string`                                          | Default value                       |                             |
| `customValidators`    | \`((control: AbstractControl) => ValidationErrors | null)\[]\`                          | Array of Angular Validators |
| `customErrorMessages` | `{ [key: string]: string }`                       | Custom error messages by error key  |                             |


🧩 Dependencies
This library depends on:

@vanshasomani/generic-input

Angular Material (Button, FormField, Input, Select, etc.)

Angular Forms (Reactive)

Ensure these modules are available in your project.