Custom Values
To configure the MultiSelect to accept custom values, set the allowCustom
property to true
.
This feature is not available when using
adaptive mode
.
Primitive Values
If the component is bound to primitive values (strings, numbers, or other), set the allowCustom
property to true
.
This approach is valid when the component is either bound to a dataset of primitive (strings, numbers, or other) or complex values (objects), and the
valuePrimitive
property is set totrue
.
The following example demonstrates how to allow custom primitive values:
- Each value of the MultiSelect is unique and can be selected once. If the typed custom value matches an item from the list, the component will select it on
Enter
. If the typed value matches an already selected item, the component will deselect that value and remove the corresponding tag. - The default matching logic is case-insensitive.
To customize the built-in matching logic and deselecting behavior of the tags, use the valueNormalizer
property. You can persist the selected tag on its consecutive selection, if the valueNormalizer
returns null
. For example, if the user types in small
, the MultiSelect will select the Small item from its item list on Enter
. If the user types in small
again, the MultiSelect will not remove the already selected Small tag on Enter
.
The following example demonstrates how to apply the custom deselecting behavior of the tags.
Complex Values
If the component is bound to objects, set the allowCustom
property to true
and provide a valueNormalizer
function. The purpose of the valueNormalizer
function is to convert the user text input into an object that can be recognized as a valid MultiSelect value.
The
valueNormalizer
function receivesObservable<string>
as an argument and is expected to return a single normalized value that is wrapped asObservable
, which will be further processed by the component.
The following example demonstrates how to allow custom object values.
Using with a Remote Service
The following example demonstrates how to handle custom object values through a remote service.
Handling Errors
The following example demonstrates how to handle errors that occur while normalizing custom object values through a remote service.