Patch value is not setting the value to the mat-select

June 15, 2022

I have a mat-select dropdown in a form along with many other controls. I did patch value after getting from DB. Everything is getting mapped except for mat-select.

UI Code

<mat-label>Select an option</mat-label>
<mat-select formControlName="organization"  >
   <mat-option [value]="0">None</mat-option>
   <mat-option [value]="1">Bank Operations (Mike Conticello)</mat-option>
   <mat-option [value]="2">Brokerage product Services (Kent Clark)</mat-option>
   <mat-option [value]="3">Custody & Asset Services ( Staci Sullivan)</mat-option>
</mat-select>

TS code

this.nominationSvc.GetNominationById(this.id)
  .then(
    result => {
        if (result != null) {
          console.log(result.organization);
          this.nominationForm.patchValue(result);
          }
        }
    });

>Solution :

As the organization value in result was a string,

Change the mat-option value to string

 <mat-select formControlName="organization"  >
    <mat-option [value]="'0'">None</mat-option>
    <mat-option [value]="'1'">Bank Operations (Mike Conticello)</mat-option>
    <mat-option [value]="'2'">Brokerage product Services (Kent Clark)</mat-option>
    <mat-option [value]="'3'">Custody & Asset Services ( Staci Sullivan)</mat-option>
 </mat-select>