title: Angular mat-select not displaying zone name on edit
body: <p>i'm using angular mat-select to display a list from WebAPI (zone table)...it display correct what i need (zone object Zoneid, Zname ). on submit i save the id (witch is foreign key on operation table)... my problem, when i select an operation object from mat-table list to edit, the form load the object and set controls (input text) with all values that i need to display except mat-select component it display nothing (i want to display zone name and when i submit i save just the zone id)..can you help me to reach my goal this is my code:</p>
  <h1>form html file</h1>
  <pre><code> &lt;mat-form-field&gt;
              &lt;mat-select formControlName=&quot;Zname&quot;  placeholder=&quot;Zone&quot; &gt;
                  &lt;mat-option&gt;None&lt;/mat-option&gt;
                  &lt;ng-container *ngFor=&quot;let zone of zoneList&quot; &gt;
                  &lt;mat-option value=&quot;{{zone.ZoneID}}&quot; &gt;{{zone.Zname}}&lt;/mat-option&gt;
                  &lt;/ng-container&gt;
              &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <h1>service file</h1>
  <pre><code>........
  
  populateForm(Operation) {
  
   this.form.setValue(Operation);
  
  }
  
  </code></pre>
  <h1>operations list html file</h1>
  <pre><code>
    &lt;div class=&quot;search-div&quot; lan=&quot;ar&quot; dir=&quot;rtl&quot;&gt;
      &lt;button mat-raised-button  (click)=&quot;onCreate()&quot;&gt;
        &lt;mat-icon&gt;add&lt;/mat-icon&gt;New Operation
      &lt;/button&gt;
      &lt;mat-form-field class=&quot;search-form-field&quot; floatLabel=&quot;never&quot;&gt;
        &lt;input matInput [(ngModel)]=&quot;searchKey&quot; placeholder=&quot;Search&quot; autocomplete=&quot;off&quot; (keyup)=&quot;applyFilter()&quot;&gt;
        &lt;button mat-button matSuffix mat-icon-button aria-label=&quot;Clear&quot; *ngIf=&quot;searchKey&quot;  (click)=&quot;onSearchClear()&quot;&gt;
          &lt;mat-icon&gt;close&lt;/mat-icon&gt;
        &lt;/button&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mat-elevation-z8&quot; lan=&quot;ar&quot; dir=&quot;rtl&quot;&gt;
      &lt;mat-table [dataSource]=&quot;listData&quot;  matSort&gt;
        &lt;ng-container matColumnDef=&quot;TransID&quot; [style.display]=&quot;'none'&quot;&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.TransID}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;TransNo&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef  mat-sort-header&gt;xxxx&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.TransNo}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;RequestDate&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef  mat-sort-header&gt;xxxxx&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.RequestDate | date: &quot;dd/MM/yyyy&quot; }}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;Seller&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;xxxxx&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.Seller}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;Buyer&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;xxxxx&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.Buyer}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;ZoneID&quot; [style.display]=&quot;'none'&quot;&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.ZoneID}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;Gouvernorat&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;xxxxx&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.Gouv}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;Zname&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;zone&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.Zname}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;LOT&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;xxxx&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.LOT}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;TransType&quot; &gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;xxxx&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.TransType}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;Agent&quot;  [style.display]=&quot;'none'&quot;&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.Agent}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;Statut&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;xxxxx&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.Statut}}&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;actions&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt;&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let row&quot;&gt;
            &lt;button mat-icon-button (click)=&quot;onEdit(row)&quot;&gt;&lt;mat-icon&gt;launch&lt;/mat-icon&gt;&lt;/button&gt;
            &lt;button mat-icon-button color=&quot;warn&quot; (click)=&quot;onDelete(row.TransID)&quot;&gt;&lt;mat-icon&gt;delete_outline&lt;/mat-icon&gt;&lt;/button&gt;
          &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;loading&quot;&gt;
          &lt;mat-footer-cell *matFooterCellDef colspan=&quot;6&quot;&gt;
            ...جاري تحميل البيانات 
          &lt;/mat-footer-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;noData&quot;&gt;
          &lt;mat-footer-cell *matFooterCellDef colspan=&quot;6&quot;&gt;
            ...لا يوجد بيانات
          &lt;/mat-footer-cell&gt;
        &lt;/ng-container&gt;
        &lt;mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/mat-header-row&gt;
        &lt;mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/mat-row&gt;
        &lt;mat-footer-row *matFooterRowDef=&quot;['loading']&quot; [ngClass]=&quot;{'hide':listData!=null}&quot;&gt;&lt;/mat-footer-row&gt;
        &lt;mat-footer-row *matFooterRowDef=&quot;['noData']&quot; [ngClass]=&quot;{'hide':!(listData!=null &amp;&amp; listData.data.length==0)}&quot;&gt;&lt;/mat-footer-row&gt;
      &lt;/mat-table&gt;
      &lt;mat-paginator [pageSizeOptions]=&quot;[25, 50, 100, 250]&quot; [pageSize]=&quot;25&quot; showFirstLastButtons&gt;&lt;/mat-paginator&gt;
    &lt;/div&gt;
  </code></pre>
  <h1>my sql tables</h1>
  <pre><code> [1]: https://i.stack.imgur.com/5S3BA.png
  </code></pre>
  <h1>component of operation list</h1>
  <pre><code>
  export class OperationsHistoryComponent implements OnInit {
  
   
    listData:any; 
    
    displayedColumns: string[] = ['TransNo','RequestDate','Seller','Buyer','TransType','Gouvernorat','Zname','LOT','Statut','actions'];
    @ViewChild(MatSort) sort: MatSort;
    @ViewChild(MatPaginator) paginator: MatPaginator;
    searchKey: string;
    
  
    constructor(private service: OperationService,
                private dialog: MatDialog,
                public notificationService: NotificationService,
                public dialogService: DialogService) 
    {  
     
    }
  
    ngOnInit() {
  
        this.service.getOperationsList().subscribe(data =&gt; {
          
                     this.listData = new MatTableDataSource();
                     this.listData.data = data;
  
                      this.listData.sort = this.sort;
                      this.listData.paginator = this.paginator;
               
                 });
  
         
                }
  
  
    onEdit(row){
  
      this.service.populateForm(row);
    
      const dialogConfig = new MatDialogConfig();
      dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;
      dialogConfig.width = &quot;60%&quot;;
      this.dialog.open(OperationComponent,dialogConfig);
    }
  
   
  
  }
  
  </code></pre>