To set the value, apply any of the following approaches:
- Use the
valueproperty. If the value is set through the
valueproperty, you have to hook up to the
valueChangeevent and manually update the value of the
- Use the
ngModelvalue binding. If the value is set by the
ngModelvalue binding, the framework will automatically update the corresponding field from the model after the value of the component changes.
- Use the
formControlNamevalue binding available in the Reactive forms. If the value is set by the
formControlNamevalue binding, the framework will automatically update the corresponding field from the form model after the value of the component changes.
The DropDownList does not support the simultaneous usage of the
valueproperty and the
When binding the DropDownList value, the component provides options for:
- Using primitive values (strings, numbers, or other)
- Using complex values (objects)
- Using primitive values from object fields
- Handling invalid value errors
If the DropDownList is bound to a dataset of primitives, its value will be a primitive of the same type.
Primitive data types include:
If the DropDownList 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 set a value for the field, the DropDownList 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 passed
If the value which is assigned through the
In the following example, the component has both its
[textField] specified, which implies that the
[data] will contain objects. Because the
[valuePrimitive] is not explicitly set to
- Change the value type, or
- Update the settings of the component.
The following table lists the valid configuration scenarios.
|primitive||primitives||Not set (automatically calculated as |
|object||objects||Not set (automatically calculated as |