Field Component
A versatile base component for form input fields, providing comprehensive validation, formatting, and interaction capabilities. Supports various input types, custom styling, permissions, and advanced validation rules including length, pattern, custom, and range validations.
Overview
A versatile base component for form input fields, providing comprehensive validation, formatting, and interaction capabilities.
The Field Component serves as a foundation for form input elements, offering:
Comprehensive validation system with multiple validation types
Custom formatting capabilities
Interactive state management
Flexible styling options
Internationalization support
Validation Types
Length validation (minimum and maximum)
Pattern matching using regular expressions
Range validation for numeric values
Custom validation using JavaScript
Required field validation
Unique value validation
Properties
Property Name | Code | Type | Description |
|---|---|---|---|
Enabled |
| boolean | Controls whether the field is interactive or disabled |
Value |
| text | Current value of the input field |
Formatted Value |
| text | Displayed value after formatting |
Field Style |
| text | Visual style of the field (flat, outlined, filled, borderless) |
Validation |
| text | Validation rules to apply (length, pattern, required, unique, range, custom) |
Minimum Length |
| number | Minimum number of characters allowed |
Maximum Length |
| number | Maximum number of characters allowed |
Validation Pattern |
| text | Regular expression pattern for validation |
Pattern Validation Message |
| multi-locale | Custom message for pattern validation failure |
Custom Validation Script |
| text | Custom JavaScript function for advanced validation |
Custom Validation Message |
| multi-locale | Custom message for validation script failure |
Placeholder |
| multi-locale | Hint text displayed when the field is empty |
Minimum Value |
| text | Minimum allowed value for range validation |
Maximum Value |
| text | Maximum allowed value for range validation |
Methods
Name | Description |
|---|---|
| Returns the input field type. Used to determine the appropriate rendering and behavior of the field |
| Handles value change events and triggers associated actions. Manages formatting and validation of the new value |
| Performs comprehensive validation on the input field based on configured validation rules. Returns validation status and error messages if applicable |
Events
Event Type | Name | Description |
|---|---|---|
Focus Events |
| Triggered when the field gains focus |
Focus Events |
| Triggered when the field loses focus |
Value Events |
| Triggered when the field value changes |