title: Angular 6 adding change event on drop down list is giving an error of undefined value
body: <p>I am having a drop list generated at each row of data:</p>
  
  <pre><code>&lt;ng-container matColumnDef="status_change"&gt;
    &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Change Status&lt;/th&gt;
    &lt;td mat-header *matCellDef="let row"&gt;
      &lt;mat-form-field&gt;
        &lt;form [formGroup]="sitStatus"&gt;
          &lt;mat-select (click)="updateUnitSituationStatus()" formControlName="sitStatusControl" placeholder="Change Status To"&gt;
            &lt;!-- &lt;mat-option [value]="row.unit_sprotection_status"&gt;{{row.unit_sprotection_status}}&lt;/mat-option&gt; --&gt;
            &lt;mat-option *ngIf="row.unit_sprotection_status!='Active'" value="Active"&gt;Active&lt;/mat-option&gt;
            &lt;mat-option *ngIf="row.unit_sprotection_status!='Inactive'" value="Inactive"&gt;Inactive&lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/form&gt;
      &lt;/mat-form-field&gt;
    &lt;/td&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>I used <code>(click)</code> event, but an error appeared:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'value' of undefined
        at UnitEditComponent.push</p>
  </blockquote>
  
  <p>Here is the method:</p>
  
  <pre><code>updateUnitSituationStatus(){
      console.log(this.formGroup.controls['sitStatusControl'].value);
  }
  </code></pre>
  
  <p>I tried to use <code>(change)</code> event but nothing happened too.</p>