Value Binding
The MultiSelect value can be an array of either primitive (strings, numbers, or other) or complex values (objects).
To set the value, apply any of the following approaches:
- Use the
value
property. If the value is set through thevalue
property of the MultiSelect, you have to hook up to thevalueChange
event and manually update thevalue
property. - Use the
ngModel
value binding. If the value is set by thengModel
value binding, the framework automatically will update the corresponding field from the model after the value of the component changes. - Use the
formControlName
value binding available in the Reactive forms. If the value is set by theformControlName
value binding, the framework automatically will update the corresponding field from the form model after the value of the component changes.
- The MultiSelect does not support the simultaneous usage of the
value
property and thengModel
value binding.- The MultiSelect does not support values which contain
\n
new line characters. The regularinput
HTML DOM element which the MultiSelect uses internally treats\n
as a regular whitespace. Therefore, when the component compares the value of theinput
element with the data item that is selected by the user, the two values differ, the value of theinput
element is actually not present in the data of the component, and the MultiSelect does not recognize it. To handle such issues, map the incoming data so that it contains regular whitespaces only.
When binding the MultiSelect value, the component provides options for:
- Using primitive values (string, number, or other)
- Using complex values (objects)
- Using primitive values from object fields
- Handling invalid value errors
Primitive Values
If the MultiSelect is bound to a dataset of primitive values, its value will be an array of primitives of the same type.
Object Values
If the MultiSelect is bound to a dataset of objects, its value will be an object of the same type.
When the selected item is an object, always specify
valueField
. If you do not a set value for the field, the MultiSelect will compare the items by reference, which may complicate debugging. For example, the selected value will not be applied, if it does not reference the exact passeddata
object.
Primitive Values from Object Fields
If the MultiSelect is bound to a dataset of complex objects and the valuePrimitive
property is set to true
, its value will also be of the primitive type (string, number).
Invalid Value Errors
If the value which is assigned through the [value]
or [(ngModel)]
inputs does not match the expected type, the MultiSelect throws a JavaScript error.
In the following example, the component has both its [valueField]
and [textField]
specified, which implies that the [data]
will contain objects. Because the [valuePrimitive]
is not explicitly set to true
, the MultiSelect expects an array of object values. Instead, an array with a number is provided and, as a result, a JavaScript exception occurs.
To fix the JavaScript issue, either:
- Change the value type, or
- Update the settings of the component.
The following table lists the valid configuration scenarios.
Value | [Data] | [ValuePrimitive] |
---|---|---|
[primitives] | primitives | Not set (automatically calculated as true ) |
[objects] | objects | Not set (automatically calculated as false ) |
[primitives] | objects | true (manually set by the developer) |