packages/eui/packages/components/directives/eui-maxlength.directive.ts
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 :
AfterContentInit
OnDestroy
OnChanges
Selector |
input[euiMaxlength],
textarea[euiMaxlength],
[ngModel][euiMaxlength],
[formControlName][euiMaxlength] |
Properties |
Methods |
Inputs |
Outputs |
HostListeners |
constructor()
|
euiMaxlength |
Type : number
|
isShowMaxlength |
Type : boolean
|
Default value : true
|
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. |
change |
Arguments : '$event'
|
input |
Arguments : '$event'
|
paste |
Arguments : '$event'
|
onChange | ||||||
onChange(event: Event)
|
||||||
Decorators :
@HostListener('change', ['$event'])
|
||||||
Parameters :
Returns :
void
|
onInput | ||||||
onInput(event: KeyboardEvent)
|
||||||
Decorators :
@HostListener('input', ['$event'])
|
||||||
Parameters :
Returns :
void
|
onPaste | ||||||
onPaste(event: ClipboardEvent)
|
||||||
Decorators :
@HostListener('paste', ['$event'])
|
||||||
Parameters :
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 :
Parameters :
Returns :
void
|
valueChangesSubscription |
Type : Subscription
|