Bound reactive form controls and the combobox

[Brenden]

I am working on a reactive form that uses the combobox component as an autocomplete to dynamically search for the values that the user is typing into it. We need to use the combobox instead of the actual autocomplete component because we need the value to be the entire underlying object that the user selects. 

This form also needs to pre-populate some data given to the component. I accomplish this using FormArrays/FormGroups and binding the combobox component to the value of the form control via the formControlName attribute. The problem I run into though is that when the combobox is bound to the formControl values, the text in the field that is bound to textField is not displayed.

My understanding is that since the objects I'm initializing the form with are not in the data list (i.e. my search results) they won't be displayed. I'd rather like to avoid merging the two lists together as that destroys the separation of concerns between something dynamic (the search results) and the static initial values. I'd also like to not have those initial values pop up as search results since they are already in the form. 

I've created a stackblitz that demonstrates my problem. https://stackblitz.com/edit/angular-cyaiax You can see by looking in the console that the initial form state is valid and pre-populated with the values supplied but they aren't displayed. Additionally if you "search" by typing in a combobox and selecting a value it will update the form appropriately and display the text. 

Is there a way to make the combobox display the pre-populated values of the formControl it's bound to?

[Dimiter Madjarov]

Hi Brenden,


By default, if the value of the ComboBox is not present in the data set (as in the current scenario, since the data is not yet available), this value will not be bound. This behavior is controlled by the allowCustom input property in the ComboBox component, which is false by default.

https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/ComboBoxComponent/#toc-allowcustom

The possible solutions in the current case would either be to allow custom values or if this is not desired - bind the ComboBox to a "fake" initial array containing the initial value while the real data is being fetched as in the current example:

https://stackblitz.com/edit/angular-phphet-32y2fa?file=app/app.component.ts

Regards,
Dimiter Madjarov
Progress Telerik

[Brenden]

Hi Dimiter, 

Can you provide an example of how to configure the valueNormalizer in this situation? In the past when I've used allowCustom and don't want the value the user entered to be selected I've returned null or an empty object. This can cause the component to get in a weird state though where no value is selected but the data results are stuck open. e.g. 

const initialValues = [{val1: 'abc'}, {val1: 123'}];

public valueNormalizer = (text: Observable<string>) => text.pipe(map((text: string) => {
       initialValues.forEach(valObj => {
            if (valObj.val1 === text) {
              return valObj;
            }
        });
        return null;
    }));

 

[Dimitar]

Hello Brenden,

If I understand correctly, the requirement is to resolve the pre-populated custom values but to discard any future custom values that the user would enter?
If that is correct, the allowCustom option is not well suited for such scenarios. Returning null in the valueNormalizer does set the component value to null, however the text will be persisted, as it is read during component state update from the native input element. Additionally, when allowCustom is enabled hitting enter does not select the focused item, but rather tries to persist the current text as the new value, which doesn't seem very appropriate for your use case. Basically, using allowCustom but actually not allowing custom values is understandably not well supported. A workaround would be to throw an error in the valueNormalizer if the entered value by the client is not recognized as part of your data set - this will clear the input and the component value. 

I'd, however, recommend going with the second approach suggested in the previous answer - create a temporary array while there's no data.

The reason the ComboBox does not resolve custom values when allowCustom is set to false is that the component tries to resolve the value on enter, on blur, on escape, etc. And it would be very confusing for the end users if the value disappears so easily with no way to select it back. So, in my opinion, it would probably be best to add the pre-populated value in a temporary array. Otherwise we would have to resolve using rather hacky workarounds.

If an additional example or any further assistance is needed on the topic, make sure to write back.

Regards,
Dimitar
Progress Telerik