CODEWITHSUNDEEP
angularangular-materialform-control
lostcoder
lostcoder

Reputation: 97

Use of formControl inside mat-select in AngularMaterial

The following example i have taken from Angular Material

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

2)These is the second piece of code without formControl

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select  multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

ts-code

export class SelectMultipleExample {
  toppings = new FormControl();
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

  1. i don't see Any difference in the first case and second case

  2. Why Even should i use mat-select with formControl ,can anyone let me know some use cases and how my first code is different from second

Upvotes: 0

Views: 1464

Answers (1)

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

The difference is, one general case where you would need a selected value(s) from MatSelect, in that case, your second example code will fail (you need an extra variable to hold the selected value)

so with the first example, you can easily get a selected value using

toppings.value

Here is the working demo :)

Upvotes: 1

Related Questions