How to receive a type from Angular 12 reactive dropdown list when change fired

Question

in an Angular 12 reactive form, I have a dropdown list which is hooked up to fire on the change event. Now the data populating the D/D is of a Type rather than just a list of strings. When it returns I cannot get the object of Type but just selectedIndex (there is something representing the OPTION element I think, when I delve into the returned event object).

template section:

<div>
  <label class="form-check-label">Title</label>
  <select class="form-control" formControlName="things" (change)="onChangeThing($event)">
    <option [ngValue]="null">All Things</option>
    <option *ngFor="let thing of things; " [ngValue]="thing">
      {{ thing.name }} - {{ thing.anId }}
    </option>
  </select>
</div>

the event called:

  onChangeThing(e) {
    console.log(e.target.value);
    console.log(e.target.selectedIndex);
  }

How can I make it pass back the selected Thing object?

Thanks

Answer 1

You can use (ngModelChange) instead of (change):

<select formControlName="things" (ngModelChange)="onChangeThing($event)">

StackBlitz example