Maintained reference:
customitemselectiontableis the up-to-date version of this topic. This page keeps older notes and examples.
The Custom Item Selection Table Component is a Formly component designed for managing item selections in forms, allowing users to add or remove items from a list with validation and pagination support.
This component provides a flexible interface for selecting items from various data sources, including APIs and static arrays. It supports multiple display modes and validation constraints to enhance user experience.
| Property | Type | Description |
|---|---|---|
key |
string |
Unique identifier for the field |
type |
string |
Type of the component (e.g., customitemselectiontable) |
props |
object |
Configuration options for the component |
defaultValue |
any |
Default value for the field |
expressions |
object |
Dynamic expressions for field behavior |
validation |
object |
Validation messages and rules |
validators |
object |
Custom validators |
asyncValidators |
object |
Asynchronous validators |
columns |
TableColumn[] |
Table columns |
label |
string |
Field label |
searchable |
boolean |
Enable search |
searchPlaceHolder |
string |
Search placeholder |
emptyMessage |
string |
Empty state text |
customTableClass |
string |
Additional CSS classes |
disabled |
boolean |
Disable entire table |
Here's a complete example demonstrating both add and remove modes:
{
"key": "availableServices",
"id": "formly_8_customitemselectiontable_availableServices_1",
"type": "customitemselectiontable",
"props": {
"url": "/integration/v1/fetch/sync",
"label": "Select Business Activity",
"columns": [
{
"key": "desEng",
"title": "Service",
"width": "70%"
},
{
"key": "code",
"title": "Code",
"width": "30%"
}
],
"dataset": {
"params": {
"page": 0,
"size": 10
},
"pageKey": "page",
"sizeKey": "size",
"pageSize": 10,
"dataField": "data.data",
"pageStart": 1,
"searchKey": "searchTerm",
"httpMethod": "POST",
"totalPagesKey": "data.totalPages",
"totalElementsKey": "data.totalElements"
},
"disabled": false,
"searchable": true,
"useBaseUrl": true,
"placeholder": "",
"endpointCode": "VICTOR_TEST_PAYLOADS_FETCH",
"selectionConfig": {
"mode": "add",
"displayMode": "icon-only",
"maxItems": 3,
"actionIcon": "icon-plus",
"selectedIcon": "icon-check",
"targetField": "cart"
}
},
"defaultValue": null,
"expressions": {},
"validation": {
"messages": {
"maxSelection": "You can select up to 3 activities only",
"minSelection": "Please select at least one activity to proceed"
}
},
"validators": null,
"asyncValidators": null
},
{
"key": "cart",
"id": "formly_8_customitemselectiontable_cart_2",
"type": "customitemselectiontable",
"props": {
"items": [],
"label": "Selected Activitiesdsfda",
"columns": [
{
"key": "desEng",
"title": "Name",
"width": "70%"
},
{
"key": "code",
"title": "Code",
"width": "30%"
}
],
"disabled": false,
"searchable": false,
"placeholder": "",
"sourceField": "cart",
"showInPreview": true,
"selectionConfig": {
"mode": "remove",
"displayMode": "icon-only",
"minItems": 1,
"actionIcon": "icon-trash-01",
"actionLabel": "Remove"
}
},
"defaultValue": null,
"expressions": {},
"validation": {
"messages": {
"maxSelection": "You can select up to 3 activities only",
"minSelection": "Please select at least one activity to proceed"
}
},
"validators": null,
"asyncValidators": null
}
add and removeHow it works:
| Property | Type | Required | Description |
|---|---|---|---|
mode |
'add' | 'remove' |
true | Table behavior mode |
targetField |
string |
For add mode | Form field to store selections |
displayMode |
'icon-text' | 'icon-only' | 'text-only' |
false | What to show on button (default: 'icon-text') |
buttonStyle |
'default' | 'icon-button' |
false | Button appearance (default: 'default') |
actionIcon |
string |
false | Icon for action button |
actionLabel |
string |
false | Button text label |
selectedIcon |
string |
false | Icon for selected items (add mode) |
availableIcon |
string |
false | Icon for available items (add mode) |
removeIcon |
string |
false | Icon for remove action (remove mode) |
minItems |
number |
false | Minimum items required |
maxItems |
number |
false | Maximum items allowed |
preventDuplicates |
boolean |
false | Prevent duplicate selections (default: true) |
The component provides built-in validation based on minItems and maxItems constraints. When items are added or removed, validation runs automatically and displays error messages below the field.
Set validation constraints in selectionConfig and provide custom messages in validation.messages:
{
"key": "teamMembers",
"type": "customitemselectiontable",
"props": {
"label": "Select Team Members",
"sourceField": "selectedMembers",
"columns": [
{ "key": "name", "title": "Member", "width": "100%" }
],
"selectionConfig": {
"mode": "remove",
"maxItems": 10,
"minItems": 2
}
},
"validation": {
"messages": {
"minSelection": "You must keep at least 2 team members",
"maxSelection": "You cannot have more than 10 team members"
}
}
}
Note: Use minSelection and maxSelection as error keys in your validation messages (not minItems/maxItems).
Configure custom validation messages using Formly's validation.messages configuration:
minSelection: true, maxSelection: true)validation.messages based on the error keyminSelection and maxSelection as error keys (not minItems/maxItems)Basic Validation:
{
"key": "teamMembers",
"type": "customitemselectiontable",
"props": {
"label": "Select Team Members",
"sourceField": "selectedMembers",
"columns": [
{ "key": "name", "title": "Member", "width": "100%" }
],
"selectionConfig": {
"mode": "remove",
"maxItems": 10
}
},
"validation": {
"messages": {
"minSelection": "You must keep at least 2 team members",
"maxSelection": "You cannot have more than 10 team members"
}
}
}
With Custom Messages:
{
"key": "selectedActivities",
"type": "customitemselectiontable",
"props": {
"label": "Select Business Activities",
"url": "/integration/v1/fetch/sync",
"endpointCode": "FETCH_BUSINESS_ACTIVITIES",
"columns": [
{ "key": "name", "title": "Activity", "width": "100%" }
],
"dataset": {
"httpMethod": "POST",
"dataField": "data.items"
},
"selectionConfig": {
"mode": "add",
"maxItems": 3
}
},
"validation": {
"messages": {
"minSelection": "Please select at least one activity to proceed",
"maxSelection": "You can select up to 3 activities only"
}
}
}
Behavior: