How to get value from DropdownList with Reactive Form

[Le Van Tuan]

Hi Support Team,

Why the reactive form working with data type is string as your example. But when I change it to Object, I could not get value in a reactive form with formColtrolName. It always null.

Data type:

data: { [key: string]: Object }[] = [];

<ejs-dropdownlist

                         [dataSource]="data"

                        [fields]="fields"

                        [placeholder]="'CREATE_REGISTRATION.CREATE_NEW.SERVICE_DETAIL.ADMISSION_ICD10'|translate"

                        formControlname="admissionICD10"

                        ></ejs-dropdownlist>

[Ponmani Murugaiyan]

Hi Le,  

Greetings from Syncfusion support. 

We have validated your reported issue. We able to get the value using formControlName in reactive forms. We have prepared sample with datasource type as Object for your reference. Please find the test sample and code snippet below. 

<ejs-dropdownlist formControlName="skillname" name="skillname" 

[dataSource]='data' [fields]='fields' [placeholder]='autoreactiveplaceholder' floatLabelType='Auto'> 

</ejs-dropdownlist> 

... 

public data:  { [key: string]: Object }[] =  

[ { Id: 'game1', Game: 'Badminton' }, 

  { Id: 'game2', Game: 'Football' },  

  { Id: 'game3', Game: 'Tennis' }]; 

public fields: Object = { value: 'Game' }; 

... 

<td style="width:50%">Selected Book: </td> 

<td class="formtext">{{ skillForm.get('skillname').value }}</td> 

 

 

Sample: https://stackblitz.com/edit/angular-iuynww-schmon?file=app.component.html 

 

Kindly check with the above sample meets your requirement. If not or if we misunderstood the query, please provide the below details. 

1. Elaborate the issue with video demonstration to replicate in our end.
2. Try to replicate the issue in the provided sample.

The above requested details will help us to provide you the solution at earliest. 

 

Regards, 

Ponmani M

[Le Van Tuan]

Thank you for your support. I did it. 

[Ponmani Murugaiyan]

Hi Le, 

Thanks for the update.  Please get back us if you need further assistance. 

Regards, 

Ponmani M