🧩 @vanshasomani/generic-input

A reusable, highly-configurable Angular Material Input Component that supports all input types, password toggle, custom validation, and beautiful error handling.

---

🚀 Features

- Supports all common input types: text, password, email, textarea, select, checkbox, radio
- Password toggle with eye icon
- Custom validators and error messages
- Reactive Forms integration
- Dynamic label, hint, and icon support
- Required asterisk * indicator with showRequiredStar
- Minimal, clean Material Design

---

📦 Installation

bash

npm install @vanshasomani/generic-input





🔧 Usage

✅ Import in Standalone Component

ts

Copy

Edit

import { GenericInput } from '@vanshasomani/generic-input';



@Component({

  selector: 'app-login',

  standalone: true,

  imports: [GenericInput, ReactiveFormsModule],

  templateUrl: './login.component.html'

})

export class LoginComponent {

  // ...

}



📋 Template Usage

html

Copy

Edit

  [config]="emailConfig"

  [formControl]="loginForm.get('email')">





🧠 Component Setup

ts

Copy

Edit

import { FormBuilder, Validators } from '@angular/forms';

import { GenericInputInterface } from '@vanshasomani/generic-input';



loginForm = this.fb.group({

  email: ['', [Validators.required, Validators.email]]

});



emailConfig: GenericInputInterface = {

  type: 'email',

  label: 'Email Address',

  placeholder: 'Enter your email',

  appearance: 'outline',

  id: 'email',

  name: 'email',

  icon: 'mail',

  showRequiredStar: true, // 👈 shows red asterisk if required validator exists

  customErrorMessages: {

    required: 'Email is required',

    email: 'Please enter a valid email'

  }

};



GenericInputInterface {

  appearance: 'outline' | 'fill';

  type: string;

  placeholder: string;

  showRequiredStar?: boolean;

  value?: string;

  id: string;

  name: string;

  icon?: string | null;

  label: string;

  hint?: string | null;

  disabled?: boolean;

  options?: { value: string; label: string }[];

  class?: string;

  customValidators?: ((control: AbstractControl) => ValidationErrors | null)[];

  customErrorMessages?: { [key: string]: string };

}



🧾 GenericInputInterface



| Property               | Type                                                         | Description                                                                        |

| ---------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------- |

|

type | string | Input type: text, email, password, select, radio, checkbox, textarea

 |

|

label | string

                                                     | Field label                                                                        |

|

placeholder | string

                                                     | Placeholder text                                                                   |

|

appearance | 'outline' \| 'fill'

                                        | Material appearance                                                                |

|

id | string

                                                     | Input element ID                                                                   |

|

name | string

                                                     | Input name                                                                         |

|

icon? | string

                                                     | Optional Material icon                                                             |

|

hint? | string

                                                     | Hint shown below input                                                             |

|

disabled? | boolean

                                                    | Disable the input                                                                  |

|

options? | { value: string; label: string }[] | For select, radio

 inputs                                                       |

|

class? | string

                                                     | Extra CSS class                                                                    |

|

showRequiredStar? | boolean | Show *

 if field is required                                                      |

|

customValidators? | ((control: AbstractControl) => ValidationErrors \| null)[]

 | Custom validators                                                                  |

|

customErrorMessages? | { [key: string]: string }` | Error key → message map |

🔐 Password Toggle
Automatically enabled when type: 'password'. Toggles between password and text with a visibility icon.