Input Component

The Input component is a customizable input field for various types of data in your Angular application. It supports different input types, including text, password, email, and file inputs, and emits events on value changes and when the enter key is pressed.

Installation

Ensure that you have installed the @teenageinterface/input library and included FormsModule in your Angular application. If not, you can add them using:

npm install @teenageinterface/input

import { FormsModule } from '@angular/forms';

Usage

Import the InputComponent into your Angular application:

import { InputComponent } from '@teenageinterface/input';

@Component({
  selector: 'app-input-example',
  template: `
    <tiInput [(value)]="inputValue" (onEnter)="onSubmit($event)"></tiInput>
  `,
})
export class InputExampleComponent {
  inputValue: string = '';
  onSubmit(value: string) {
    console.log('Entered value:', value);
  }
}

Example

<tiInput [value]="inputValue" [placeholder]="'Enter text'" (valueChange)="onValueChange($event)"></tiInput>

Properties

| Property | Type | Default | Description | |---------------|---------------------|-------------|-----------------------------------------------------------| | id | string | null | The ID of the input field. | | disabled | boolean | false | If true, the input field will be disabled. | | serverError | boolean | false | If true, the input will visually indicate a server error.| | value | string | "" | The value of the input field. | | placeholder | string | "" | Placeholder text for the input field. | | required | boolean | false | If true, the input will be required. | | type | "text" \| "password" \| "email" \| "file" \| "bigFile" | "text" | The input type. Supports text, password, email, file, and bigFile. |

Events

| Event | Description | |--------------|------------------------------------------------------------| | valueChange | Emitted when the value of the input field changes. | | onEnter | Emitted when the enter key is pressed in the input field. |

Methods

enter()

• Emits the onEnter event when the enter key is pressed.

Patterns

The input field has different patterns based on the type:

• text, password, file, bigFile: Accepts any string.
• email: Matches a valid email pattern using a regular expression.

Example Pattern (email)

[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$

Documentation

For more information, visit the official documentation.

Repository

The source code is available on GitHub.

License

This project is licensed under the MIT License.