kendo-dropdown formgroup - Expected initial value of type Object

[Patrick]

Any idea why the blow code will throw error "ERROR Error: Expected initial value of type Object. See http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/#toc-value-selection" ??? If I remove the 

            <kendo-dropdownlist [data]="someList"
                                [textField]="'text'"
                                [valueField]="'value'"
                                formControlName="someFormControlName">
            </kendo-dropdownlist>

This work fine.

<kendo-dropdownlist [data]="someList"
                                [textField]="'text'"
                                [valueField]="'value'">
            </kendo-dropdownlist>

So, how do I get the dropdown list to play well in formGroup ?

 

Thanks,

Bryian Tan

 

 

[Martin Bechev]

Hi Bryian,

Thank you for the provided code snippet.

Please try setting the valuePrimitive option to true as the following article demonstrates:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/value-binding/#toc-primitive-values-from-object-fields

and then follow the instructions from this page:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/forms/#toc-reactive-forms

I hope this helps.

Regards,
Martin Bechev
Progress Telerik

 

[Dimiter Topalov]

Hi Bryian,

As the error message suggests, the component needs to be bound to a complex object value, but is the formControl likely represents a primitive value. If you need to data bind the DropDownList to a list of complex objects, but the component to have a primitive value, you will need to set the valuePrimitive property to true.

Further details about the data and value binding and the forms support of the DropDownList are available in the following sections of our documentation:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/data-binding/#toc-arrays-of-complex-data

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/value-binding/

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/value-binding/#toc-primitive-values-from-object-fields

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/forms/#toc-reactive-forms

Here is an example of a DropDownList data bound to a collection of complex objects, but holding a primitive value, that is value bound via the formControlName:

https://plnkr.co/edit/vYvCtVWInhZmijaZpnQn?p=preview

Omitting the valuePrimitive property leads to the described error:

https://plnkr.co/edit/8oS8kN562Wc0Mx2eNGYU?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[waran15]

Hi Dimiter,
I had exact same error and your answer just fixed it even though this is three years ago. You are awesome I have got your responses on my progress account tickets and you are one of the best, and you always give a very detailed responses.

In relation to this error i am having trouble setting the default value on the kendo dropdown. btw i am using the built-in reactiveform on kendo scheduler component with "kendoSchedulerEditDialogTemplate"

When the dialog form opens i load my dropdown data (which is a list of titles) at (slotDblClick) and (eventDblclick) events like the following:

public onSlotDblClick({ sender, start, end, isAllDay }: SlotClickEvent): void {
this.closeEditor(sender);

this.loadTitleAvailable();

this.formGroup = this.formBuilder.group({
'start': [start, Validators.required],
'end': [end, Validators.required],
'startTimezone': new FormControl(),
'endTimezone': new FormControl(),
'isAllDay': isAllDay,
'title': ['', Validators.required],
'description': new FormControl(''),
'recurrenceRule': new FormControl(),
'recurrenceID': new FormControl(),
//'seat': new FormControl()
});

sender.addEvent(this.formGroup);
}


public onEventDblClick({ sender, event }): void {
this.closeEditor(sender);

this.loadTitleAvailable();

this.formGroup = this.formBuilder.group({
'start': [event.start, Validators.required],
'end': [event.end, Validators.required],
'startTimezone': event.startTimezone,
'endTimezone': event.endTimezone,
'isAllDay': event.isAllDay,
'title': event.title,
'description': event.description,
'recurrenceRule': event.recurrenceRule,
'recurrenceID': event.recurrenceID,
//'seat': event.new FormControl()
});

sender.editEvent(event, { group: this.formGroup, mode: Event });
}


Two problems i have after changing the 'title' to kendo dropdown

1. when i save new items, it saves the selected dropdown value and not the text. I thought i could capture on (onSave) event and change the 'title' to text, but it seem readonly at that point.

2. when i edit existing item, how can i set the default value? as you can see above on (onEventDblClick) i set 'title'=event.title in the formgroup, isn't that enough.

Thankyou so much.