eui documentation
  1. Directives
  2. EuiMaxLengthDirective

File

packages/components/directives/eui-maxlength.directive.ts

Description

A directive that adds maxLength functionality to input and textarea elements with visual feedback. It shows the remaining characters count and provides visual indication when the limit is reached.

Example :
```HTML
<!-- Basic usage -->
<input [euiMaxlength]="50">

<input [formControlName]="'name'" [euiMaxlength]="100">

Example :

Implements

AfterContentInit OnDestroy OnChanges

Metadata

Selector input[euiMaxlength], textarea[euiMaxlength], [ngModel][euiMaxlength], [formControlName][euiMaxlength]

Index

Properties
Methods
Inputs
Outputs
HostListeners

Constructor

constructor()

Inputs

euiMaxlength
Type : number
isShowMaxlength
Type : boolean
Default value : true

Outputs

maxLengthReached
Type : EventEmitter<boolean>

Emits when the input value length reaches or exceeds the maxLength limit. Emits true when a limit is reached, false when below limit.

HostListeners

change
Arguments : '$event'
input
Arguments : '$event'
paste
Arguments : '$event'

Methods

onChange
onChange(event: Event)
Decorators :
@HostListener('change', ['$event'])
Parameters :
Name Type Optional
event Event No
Returns : void
onInput
onInput(event: KeyboardEvent)
Decorators :
@HostListener('input', ['$event'])
Parameters :
Name Type Optional
event KeyboardEvent No
Returns : void
onPaste
onPaste(event: ClipboardEvent)
Decorators :
@HostListener('paste', ['$event'])
Parameters :
Name Type Optional
event ClipboardEvent No
Returns : void
Public setLengthCalcFactory
setLengthCalcFactory(fn: (input: string) => void)

Sets a custom function to calculate the length of the input value. Useful for implementing custom length calculation logic (e.g., counting characters differently).

Example :
```typescript
// Custom length calculation excluding spaces
directive.setLengthCalcFactory((value: string) => value.replace(/\s/g, '').length);
Example :
Parameters :
Name Type Optional Description
fn function No

Function that takes a string input and returns its calculated length
Returns : void

Properties

valueChangesSubscription
Type : Subscription

results matching ""

    No results matching ""