When using Angular 6, I want to retrieve the "formControlName" of the corresponding element whenever the selection changes.
HTML
<mat-form-field *ngIf="dispatchAdviceChildForAdd._isEditMode" class="mat-form-field-fluid">
<mat-select placeholder="Select Product" formControlName="newProductCode" required>
<mat-option *ngFor="let pl of productList" value="{{pl.productCode}}" (onSelectionChange)="changeValues($event,pl)">{{pl.productCode}}</mat-option>
</mat-select>
<mat-hint align="start">
<strong>Select</strong>
</mat-hint>
</mat-form-field>
TYPESCRIPT "changeValues"
changeValues(event, data: ProductListModel) {
// need to access formControlName here
}
I have attempted various methods but haven't had success:
changed(event) {
console.log(event.target.id);
}
I have also experimented with:
changed(event) {
const target = event.target || event.srcElement || event.currentTarget;
const idAttr = target.attributes.id;
const value = idAttr.nodeValue;
}