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.