@eui/components

EuiMaxLengthDirective

A comprehensive Angular directive that adds maximum length functionality to input and textarea elements with visual feedback and character counting.

Features

Core Functionality

• Character Limit Enforcement: Automatically restricts input length to specified maximum
• Visual Character Counter: Displays remaining characters count in real-time
• Form Integration: Works seamlessly with Angular reactive forms and template-driven forms
• Multiple Element Support: Compatible with input, textarea, and form control elements

Advanced Capabilities

• Custom Length Calculation: Configurable length calculation function for specialized counting logic
• Paste Handling: Intelligent paste event handling that respects character limits
• Dynamic Configuration: Runtime updates to max length and visibility settings
• Error State Management: Visual feedback when character limit is exceeded
• Event Emission: Notifies when character limit is reached or exceeded

Behavior

Character Counting

• Updates counter in real-time as user types
• Shows remaining characters (e.g., "25" when 25 characters remaining)
• Displays "0" when limit is reached or exceeded

Visual Feedback

• Adds CSS class eui-input-maxlength--invalid when limit exceeded
• Wraps input in eui-input-maxlength-wrapper container
• Counter element has class eui-input-maxlength

Input Restriction

• Automatically truncates input when limit exceeded
• Handles paste operations intelligently
• Works with both direct input and programmatic value changes

Form Integration

• Respects form control updateOn strategy
• Subscribes to form control value changes
• Maintains form validation state

Error Handling

• Throws error if euiMaxlength is set to negative value
• Gracefully handles null and undefined values
• Safely manages DOM manipulation and cleanup

CSS Classes

Class	Applied To	Purpose
eui-input-maxlength-wrapper	Container div	Wraps input and counter
eui-input-maxlength	Counter span	Styles the character counter
eui-input-maxlength--invalid	Counter span	Applied when limit exceeded