Reusable Angular Material Input Component
npm install @vanshasomani/generic-inputtext, password, email, textarea, select, checkbox, radio
* indicator with showRequiredStar
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 |