Custom Values

To configure the MultiSelect to accept custom values, set the allowCustom property to true.

Primitive Values

If the component is bound to primitive values, set the allowCustom property to true.

This approach is valid when the component is populated with either a dataset of objects or primitive values, 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.
Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Object 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Remote Service

The following example demonstrates how to handle custom object values through a remote service.

Example
View Source
Edit In Stackblitz  
Change Theme:

Handling Errors

The following example demonstrates how to handle errors that occur while normalizing custom object values through a remote service.

Example
View Source
Edit In Stackblitz  
Change Theme: