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 -->
<input [euiMaxlength]="50">


<!-- With form control -->
<input [formControlName]="'name'" [euiMaxlength]="100">


<!-- Hide maxlength indicator -->
<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
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
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 ""