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 :
### Basic usage
```html
<input [euiMaxlength]="50">

With form control

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

Hide maxlength indicator

Example :
<textarea [euiMaxlength]="200" [isShowMaxlength]="false"></textarea>

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

It accepts number values to indicate the maxLength of an input. To reset or disable it set the value to null. NULL value will remove any MaxLength indicator even if another input like isShowMaxlength equals true.
isShowMaxlength
Type : boolean
Default value : true

Controls the visibility of the maxLength indicator. When true, shows a counter with remaining characters. When false, hides the counter but maintains the maxLength restriction.

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
input
paste
Arguments : '$any($event)'

Methods

onChange
onChange()
Decorators :
@HostListener('change')
Returns : void
onInput
onInput()
Decorators :
@HostListener('input')
Returns : void
onPaste
onPaste(event: ClipboardEvent)
Decorators :
@HostListener('paste', ['$any($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 :
// Custom length calculation excluding spaces
directive.setLengthCalcFactory((value: string) => value.replace(/\s/g, '').length);
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 ""