CODEWITHSUNDEEP
angulartypescriptangular-material
Moussa
Moussa

Reputation: 4154

How to set initial value to Angular Material mat-select multiple

How to set initial value to Angular Material mat-select multiple that uses a list of object for options. The code can be found and runned on stackblitz

Here is the HTML :

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

An here is the typescript : 

@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample implements OnInit {
  constructor(private formBuilder: FormBuilder) { }
  formGroup = this.formBuilder.group({ 'toppings': [null, Validators.required] });
  toppingList: any[] = [
    { id: 1, name: 'Extra cheese' },
    { id: 2, name: 'Mushroom' },
    { id: 3, name: 'Onion' }
  ];

  ngOnInit() {
    this.formGroup.controls.toppings.setValue([{ id: 1 }]);
  }
}

Upvotes: 2

Views: 4347

Answers (4)

Nicolas
Nicolas

Reputation: 69

You can set initial value in this.formBuilder.group (ex. 2nd and 4th item of list) as below

 formGroup = this.formBuilder.group({ 'toppings': [[1, 3], Validators.required] });

and in html

<mat-option *ngFor="let topping of toppingList" [value]="topping.id">{{topping.name}}</mat-option> makes your stackblitz work

Upvotes: 0

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

here is working example

running example

.html

 <form [formGroup]="formGroup">
    <mat-form-field>
        <mat-label>Toppings</mat-label>
        <mat-select formControlName="toppings" multiple   (selectionChange)=" showSelectValue($event.value)">
            <mat-option  *ngFor="let topping of toppingList" [value]="topping.name"
      >{{topping.name}}</mat-option>
        </mat-select>

    </mat-form-field>
   <p>You selected: {{selected}}</p>
</form>

.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, Validators } from '@angular/forms';

/** @title Select with multiple selection */
@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample implements OnInit {
        selected: any[];

      constructor(private formBuilder: FormBuilder) { }
      formGroup = this.formBuilder.group({ 'toppings': [null, Validators.required] });
      toppingList: any[] = [
        { id: 1, name: 'Extra cheese' },
        { id: 2, name: 'Mushroom' },
        { id: 3, name: 'Onion' },
        { id: 4, name: 'Pepperoni' },
        { id: 5, name: 'Sausage' },
        { id: 6, name: 'Tomato' }
      ];

      ngOnInit() {
        this.formGroup.controls.toppings.setValue(this.selected);
      }

      showSelectValue(mySelect)
      {
        this.selected=mySelect;
        console.log(mySelect);
      }
    }


/**  Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

Upvotes: 0

Gilsido
Gilsido

Reputation: 572

If you try binding the whole object angular will check that objects are selected by comparing their reference. I advise you bind on the object's id since it's unique: this.formGroup.controls.toppings.setValue([1]); and in html <mat-option *ngFor="let topping of toppingList" [value]="topping.id">{{topping.name}}</mat-option> makes your stackblitz work

Upvotes: 2

Nikola Stekovic
Nikola Stekovic

Reputation: 635

It looks like you have to pass whole object.

Replace 

    this.formGroup.controls.toppings.setValue([{ id: 1 }]);

with

    this.formGroup.controls.toppings.setValue([this.toppingList[0]]);

Upvotes: 4

Related Questions