0

This week, i ran into a problem where dropdown control of angular material was not populating the default value coming from the API. My datasource looked like this:

public selectDataSource = [{
                    id: 1,
                    name: 'Option 1'
                }, {
                    id: 2,
                    name: 'Option 2'
                }, {
                    id: 3,
                    name: 'Option 3'
                }];

Value was coming from the API as:

{
'selectedOption': {
                    id: 2,
                    name: 'Option 2'
                }
}

But somehow, when i assigned the value to reactive form control field, it didn't get auto populated, which ideally should be the expected behavior.

Reason, answer below.... Go on

Manish Kumar
  • 1,131
  • 15
  • 28

2 Answers2

3

After all the research, I came to conclusion that Angular will only make a value as default selected if it points to the same memory location as in the original dataSource array.

In the example above, selectDataSource is stored in different memory location whereas the value coming from the API is pointing to different memory location.

Solution: Loop through the original datasource and filter the matched entry with result from API, to get the selected object from the original dataSource and that's it you are done. Something like below:

selectedOption = selectedDataSource.filter((option) => option.id === selectedOption.id)[0];

Now, we have selectedOption pointing to the same memory location from the original dataSource array.

Below is the link to solution. Try toggeling the variable solveProblem to see the default behaviour(when pointing to different memory loctaion).

https://stackblitz.com/edit/angular-reactive-dropdown-control

In a Hope, it'll help someone someday.

Thanks, Manish Kumar

Manish Kumar
  • 1,131
  • 15
  • 28
3

I had the same problem with dropdowns not showing already saved / selected choices and this answer to another question finally helped.

The solution is using the [compareWith]="compareFunction" property on the select tag to override the default comparison happening. By referencing a custom compare function you can tailor how the matching of initial value to dropdown values should work.

My current solution:

<mat-form-field>
   <mat-select formControlName="gender" [compareWith]="compareSelectValues">
      <mat-option *ngFor="let gender of genderValues" value="{{gender.id}}">{{gender.label}}</mat-option>
   </mat-select>
</mat-form-field>

And Typescript function:

private compareSelectValues(selectedValue, compareValue): boolean {
   return Number(selectedValue) === compareValue;
}

Number() is needed as the value is converted to a string after setting it in HTML. Using material design components here but looking at the other post, this shouldn't change the general functionality. Hope this helps someone, who finds this question before the other one, like I did.

Wexoo
  • 130
  • 1
  • 5