Angular 6 Material <mat-select> multiple set default value using form control

Question

I am using form control here is code for my html component

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping.value}}</mat-option>
  </mat-select>
</mat-form-field>

And my ts file is

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[]=[
      { id:1,value:"test 1"},
      { id:2,value:"test 2"}
      ]

      this.toppings.setValue(anotherList)
  }
}

I want to set default value for mat select , any help how to achieve this will be great. I want to set multiple default value.

Answer 1

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)
    }
}

Answer 2

 <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);
    }
}