Angular 6 Material <mat-select> multiple set default value using form control
The problem is due to the fact that your options are objects. In order for the selections to be applied, the selected objects must be the same objects as the ones used for the options. Revise your code as follows:
export class SelectMultipleExample {
toppings = new FormControl();
toppingList: any[] = [
{ id:1,value:"test 1"},
{ id:2,value:"test 2"},
{ id:3,value:"test 4"},
{ id:4,value:"test 5"},
{ id:5,value:"test 6"},
{ id:6,value:"test 7"}
];
constructor(){
this.bindData();
}
bindData() {
const anotherList: any[] = [
this.toppingList[0],
this.toppingList[1]
]
this.toppings.setValue(anotherList)
}
}
<mat-form-field>
<mat-label>Select Global Markets</mat-label>
<mat-select [formControl]="globalmarketCategory" multiple >
<mat-option *ngFor="let list of toppingList" [value]="list">{{list.value}}</mat-option>
</mat-select>
export class SelectMultipleExample {
globalmarketCategory= new FormControl();
toppingList: any[] = [
{ id:1,value:"test 1"},
{ id:2,value:"test 2"},
{ id:3,value:"test 4"},
{ id:4,value:"test 5"},
{ id:5,value:"test 6"},
{ id:6,value:"test 7"}
];
list = []
constructor(){
const anotherList:any[]=[
{ id:1,value:"test 1"},
{ id:2,value:"test 2"}
]
this.globalmarketCategory.setValue(anotherList);
}
}