Option1:
pass the elementRef (#select) into the change event and then you can get the values!
html
<form #f="ngForm" (ngSubmit)="save()">
<select
[(ngModel)]="selected"
#select
(change)="onKeyUp($event, select)"
name="valueCheck"
>
<option [ngValue]="undefined" disabled>Select Any</option>
<option
*ngFor="let obj of stud"
[value]="obj.rnNo"
[selected]="obj.rnNo == selected"
>
{{ obj.name }}
</option>
</select>
<button type="submit">submit</button>
<button (click)="clear()">clearValue</button>
</form>
<h3>{{ selected }}</h3>
ts
import { Component, DoCheck } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements DoCheck {
name = 'Angular 5';
stud = [
{
name: 'bala',
rnNo: '21',
},
{
name: 'suresh',
rnNo: '23',
},
{
name: 'ramesh',
rnNo: '24',
},
];
selected: any = '23';
ngOnInit() {
// this.selected = undefined;
}
ngDoCheck() {}
valueChange(event) {
console.log(
'selected value',
event.target.value,
'value of selected',
this.selected
);
//this.selected = event.target.value;
}
save(formValue) {
console.log('value i got ', this.selected);
}
clear() {
this.selected = undefined;
}
onKeyUp(event: any, select: any): void {
console.log(select.options[select.selectedIndex].value);
console.log(select.options[select.selectedIndex].text);
}
}
stackblitz
Option2: Why not just pass in the ngModel as a second parameter?
<div class="col mb-2 row">
<label class="col-sm-4 col-form-label custom-label" for="field_typeLocalite">Type Localité</label>
<div class="col-sm-7">
<select
class="form-control"
id="field_typeLocalite"
[(ngModel)]="localite.typeLocalite"
(change)="getLocaliteRattachement(localite.typeLocalite)"
name="typeLocalite"
(change)="onKeyUp($event, localite.typeLocalite)"
>
<option [ngValue]="null"></option>
<option
[ngValue]="typeLocaliteOption.id === localite.typeLocalite?.id ? localite.typeLocalite : typeLocaliteOption"
*ngFor="let typeLocaliteOption of typeLocalites; trackBy: trackTypeLocaliteById"
>
{{ typeLocaliteOption.libelle }}
</option>
</select>
</div>
</div>
ts
onKeyUp(event: any, actualValue: any): void {
this.keys = actualValue;
}