I am having a drop list generated at each row of data:
<ng-container matColumnDef="status_change">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Change Status</th>
<td mat-header *matCellDef="let row">
<mat-form-field>
<form [formGroup]="sitStatus">
<mat-select (click)="updateUnitSituationStatus()" formControlName="sitStatusControl" placeholder="Change Status To">
<!-- <mat-option [value]="row.unit_sprotection_status">{{row.unit_sprotection_status}}</mat-option> -->
<mat-option *ngIf="row.unit_sprotection_status!='Active'" value="Active">Active</mat-option>
<mat-option *ngIf="row.unit_sprotection_status!='Inactive'" value="Inactive">Inactive</mat-option>
</mat-select>
</form>
</mat-form-field>
</td>
</ng-container>
I added an event to get the value of the changed drop list. In other words, if I changed the value of drop list at row id 4, I need to get the value changed, and the id of the row, so I can update my database.
I used (click)
event, but an error appeared:
ERROR TypeError: Cannot read property 'value' of undefined at UnitEditComponent.push
Here is the method:
updateUnitSituationStatus(){
console.log(this.formGroup.controls['sitStatusControl'].value);
}
I tried to use (change)
event but nothing happened too.
Since you are using sitStatus
form group here <form [formGroup]="sitStatus">
you should lookup control in that group as well
this.sitStatus.controls['sitStatusControl'].value