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 to true.

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 receives Observable<string> as an argument and is expected to return a single normalized value that is wrapped as Observable, 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.

Suggested Links

• API Reference of the MultiSelect