Prepopulating dropdown options as object using reactive-form dynamically on load

Question

While using mat-select in reactive form, when we want to set some option(which is object) as default dynamically for formControl 'skillOptions'. It is not showing the selected value.

Preview here: https://stackblitz.com/edit/angular-evtdwq

Answer 1

Your question statement is rather vague, but from what I can infer, you want your mat-select to display the specified selected options on init. You should be binding option.value instead of the entire option object to value.

In the very first place, you are not able to bind objects to the select-option value attribute

<form [formGroup]="skillForm">
  <mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select formControlName="skillOptions">
    <mat-option *ngFor="let option of options" [value]="option.value">{{ option.label}}</mat-option>
  </mat-select>
</mat-form-field>
</form>

It should be working on this demo.