FormControl supportin kendo-dropdownlist

[Jyothi]

Hi,

I have seen some code in our project using formContol attribute. I couldn't find any documentation on it.  For some reason this is causing the default value not set on the dropdown.

dropdownPlaceholder is something like this

this.dropdownPlaceholder = {
label : `Select ${label}` ,
value : null
};

Example:

<kendo-dropdownlist [data] = "list"
[textField] = "'label'"
[valueField] = "'value'"
[defaultItem] = "dropdownPlaceholder"
style="background-color: inherit"
[valuePrimitive] = "true"
(valueChange) = "onDropdownValueChange($event)"
[popupSettings] = "{popupClass: 'facets-input-dropdown-popup', width: 'auto'}"
[disabled] = "isDisabled"
[formControl]="control">

I expect the default value to be 'Select' in the dropdown, but not seeing that. Any documentation on formControl attribute for kendo-dropdownlist will be helpful.

Regards,

Jyothi

[Petar]

Hi Jyothi,

If I understand correctly, the [defaultItem] input for the DropDownList is not working with reactive forms. I have tried to replicate the provided example in a StackBlitz here - https://stackblitz.com/edit/angular-amqjpx
It looks like it is working as expected - the default value is taken from dropdownPlaceholder. Am I missing something?

Also you can find the docs on using Reactive forms(i.e. formControl) with kendo-dropdownlist here - https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/forms/#toc-reactive-forms

Regards,
Petar
Progress Telerik

[Jyothi]

Hi Petar,

Thanks. This is very helpful.

Regards,

Jyothi

[Jyothi]

Sorry I hit the button too soon.

Does it support [formControl] tag as well? I see the example using the formControlName="gender"

 

Regards,

[Petar]

Hi Jyothi,

The DropDownList works with reactive forms, meaning both [formControl] and formControlName will work.

In this example - https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/forms/#toc-reactive-forms formControlName is used.

In this example - https://stackblitz.com/edit/angular-amqjpx [formControl] is used.

The two approaches are used in different situations. You can read more on Angular's Reactive forms here - https://angular.io/guide/reactive-forms

I hope this helps.

Regards,
Petar
Progress Telerik