Kendo UI ComboBox for Angular: how to prevent Expected value of type Object error?

Question

I am trying to make a Kendo ComboBox for Angular not crash with error "Prevent Expected value of type Object":

<kendo-combobox
    formControlName="gender"
    [data]="genders"
    [textField]="'text'"
    [valueField]="'value'"
    [valuePrimitive]="false"
    [filterable]="true"
    [allowCustom]="true"
    required
>
</kendo-combobox>

StackBlitz

The error can be obtained if the value is deleted and Tab is pressed (combo blur). In fact, by leaving an invalid value in the box, this error will occur.

I will explain below why I am using some settings:

• textField and valueField - in my application I request complex objects and the selected value will provide some information to other form fields
• [valuePrimitive]="false" - the selected value is a complex object
• [allowCustom]="false" - I used this to allow the control to receive an initial value that is not among the list. In my application I am using server-side filtering with an empty initial list

When using in the application (server-side filtering) I also receive this error when pushing the arrow button, but I can get rid of this by either ensuring that initial value is within the list of values (ugly) or simply by removing the button.

Any idea about how to make this work?

Answer 1

According to Kendo UI for Angular you have to use a valueNormalizer function to convert what the user actually types into a valid object.

public valueNormalizer = (text: Observable<string>) => text.pipe(map((text: string) => {
    return {
        value: this.genders[this.genders.length - 1].value + 1, //whatever value
        text: text
    };
}));

Please check the updated Stackblitz and let me know if it is helpful.

Answer 2

valueNormalizer didn't work for me at all.

I went for a different solution (I can't post the code here because of security limitations in my company).

We want to allow an initial value and have to allow [allowCustomer]="true" because that initial value is not initially a part of the [data] array since we fetch it from the server.

I simply pushed the initial value to the [data] array and that fixes it. no need for [allowCustome]="true"