How to select ID from mat-select/mat-option using ngModel

Question

I have a table that displays a list of items. This table uses the ngModel for data binding so I can edit an item in a form on the same page.

The form has a mat-select component that is dynamically filled.

THE TABLE:

<mat-table #table [dataSource]="trades" matSort>
    .....
    .....
    <ng-container matColumnDef="Status">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
        <mat-cell *matCellDef="let trade">{{trade.Status.Title}}</mat-cell>
    </ng-container>
    .....
    .....
    <ng-container matColumnDef="editTradeIcon">
        <mat-header-cell *matHeaderCellDef><mat-icon>mode_edit</mat-icon></mat-header-cell>
        <mat-cell *matCellDef="let trade"><mat-icon (click)="showTradeForm( trade )">mode_edit</mat-icon></mat-cell>
    </ng-container>
    .....
    .....
</mat-table>

THE FORM:

<form>
    .....
    .....
    <mat-form-field>
        <mat-select placeholder="Status" name="Status" #status [(ngModel)]="newTrade.Status.Title">
            <mat-option *ngFor="let status of statuses" [value]="status.Title">
                {{status.Title}}
            </mat-option>
        </mat-select>
    </mat-form-field>
    .....
    .....
</form>

I want to run a method on the (change) event, using the ID of the selected item. I understand the ngModel, and when I update it to [(ngModel)]="newTrade.Status.ID" and [value]="status.ID" I know I can get the ID from the event handler using (ngModelChange)="setStatusID( status.value )". However, when I make these changes, clicking the Edit Icon in the table results in not selecting the item on initialization of the form. (Clicking the Edit Icon runs a method to show the Form passing the item from the Table.)

Using a mat-autocomplete in another situation I could just add (onSelectionChange)="setStatusID( status.ID )" to the mat-option element, but this does not seem work with mat-select as the function gets fired for all items in the list each time the mat-select initiates or changes.

I have been breaking my head on this. Hopefully, someone has a solution and can help me out.

Thanks!

Chellappan வ Chellappan வ · Accepted Answer · 2018-02-15T17:50:29

may be this will help

  <form>
.....
.....
<mat-form-field>
    <mat-select  (change)="onChnage(status)" placeholder="Status" name="Status" #status [(ngModel)]="newTrade.Status.Title">
        <mat-option *ngFor="let status of statuses" [value]="status.ID">
            {{status.Title}}
        </mat-option>
    </mat-select>
</mat-form-field>
.....
.....

How to select ID from mat-select/mat-option using ngModel

1 Answers