How to get the value to the drop box by clicking the update button angular

Question

I tried to send the data to my Dropbox in my angular project but I couldn't get any selected data to that Dropbox. I want it when the update button clicked in my main table. and I used patchvalue to get the data to other text fields but dropdown value to coming.

select tag

edit button

get and put the data to fields function

Answer 1

complementary my comment In .ts

variable=''

In .html

<select [(ngModel)]="variable">
  <option value='' disable hidden>Select customer</option>
  <option *ngFor="let customerValue of customers" [value]="customerValue.id">
      {{customerValue.userName}}</option>
</select>
<button (click)="getCustomer()">get data</button>

You function getCustomer

getCustomer()
{ 
   //in this.variable you get the "id" of the selected customer
   console.log(this.variable)
   //If you need  the customer you need find in the list of the customers
   console.log(this.customers.find(x=>x.id==this.variable))
}       

NOTE: You need import the FormsModule in your module NOTE2: you can "split" the [(ngModel)] in the way

<select [ngModel]="variable" 
     (ngModelChange)="variable=$event;doSomething($event)">
       ...
</select>

doSomething(value:any)
{
    //here value is the "id" of the selected customer
}

NOTE4: Really seeing your GetOrderById, I think that you should use ReactiveFormsControls. But in the form you should use the "id" of the customer, not the customerName. Some similar to

<form [formGroup]="orderForm">
    <select formControlName="customerId"...>
    </select>
</form>