CODEWITHSUNDEEP
angularangular-materialangular6onchangeevent-binding
alim1990
alim1990

Reputation: 4972

Angular 6 adding change event on drop down list is giving an error of undefined value

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.

Upvotes: 0

Views: 9990

Answers (2)

Binbo
Binbo

Reputation: 300

I havent tried on Material UI but I believe it works the same as normal select

<select (change)="onChangeEvent($event)">
    <option value="option1">My Options</option>
</select>

Then in your .ts

onChangeEvent(ev) {
    console.log(ev.target.value); // should print option1
}

Upvotes: 1

Antoniossss
Antoniossss

Reputation: 32517

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

Upvotes: 1

Related Questions