ngx-custom-input

Custom Input Component for Angular applications with full ControlValueAccessor support, Reactive Forms integration, validation handling, and customizable styling.

Features

• ✅ Angular 16+ compatible
• ✅ ControlValueAccessor implementation
• ✅ Reactive Forms support
• ✅ Template-driven Forms support
• ✅ Validation states (invalid, touched, dirty)
• ✅ Disabled & readonly modes
• ✅ Lightweight and standalone-ready
• ✅ Customizable styles

Installation

npm install ngx-custom-input

Usage

Standalone Component

import { Component } from "@angular/core";
import { ReactiveFormsModule, FormBuilder, Validators } from "@angular/forms";
import { CustomInputComponent } from "ngx-custom-input";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [ReactiveFormsModule, CustomInputComponent],
  template: `
    <form [formGroup]="form">
      <ngx-custom-input formControlName="email" label="Email" type="email" placeholder="[email protected]"> </ngx-custom-input>
    </form>
  `,
})
export class ExampleComponent {
  constructor(private fb: FormBuilder) {}

  form = this.fb.group({
    email: ["", [Validators.required, Validators.email]],
  });
}

Using NgModule

import { NgxCustomInputModule } from "ngx-custom-input";

@NgModule({
  imports: [NgxCustomInputModule],
})
export class AppModule {}

Inputs

| Name | Type | Default | Description | | ------------- | ---------------------------------------------------------------------------------------- | ----------- | ----------------------------------------- | | id | string | undefined | Input element id | | type | 'text' \| 'email' \| 'password' \| 'number' \| 'checkbox' \| 'tel' \| 'date' \| string | 'text' | HTML input type | | name | string | '' | Input name attribute | | placeholder | string | '' | Placeholder text | | label | string | '' | Label displayed above input | | clearable | boolean | false | Shows a clear button when input has value | | readonly | boolean | false | Sets input to readonly mode |

Outputs

| Name | Description | | ----------- | ------------------------ | | valueChange | Emits when value changes | | blurEvent | Emits on blur | | focusEvent | Emits on focus |

Forms Compatibility

This component implements ControlValueAccessor, allowing seamless integration with:

• formControl
• formControlName
• ngModel

Styling

You can override styles globally:

ngx-custom-input input {
  border-radius: 6px;
}

Or extend styles through your design system (Tailwind, SCSS, etc.).

Project Structure

projects/
  ngx-custom-input/
    src/
      lib/
        custom-input.component.ts
        custom-input.component.html
        custom-input.component.scss

Build

ng build ngx-custom-input --configuration production

Contributing

Pull requests are welcome.
For major changes, please open an issue first to discuss what you would like to change.

Author

Sergio Andres Carvajal Gomez
Software Developer – Angular & Frontend Development

• GitHub: https://github.com/SergioC2K
• LinkedIn: https://www.linkedin.com/in/sergioc2k/
• Email: [email protected]

📄 License

MIT