I would like to retrieve the value of the object on event.target.value

Viewed 41

My method

 onKeyUp(event: any): void {
    this.keys = event.target.value;
  }

And my HTML code is:

 <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)"
      >
        <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>

Currently what I get is this '1: Object' and '2: Object' and '3: Object' but not the value of the object

1 Answers

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;
  }
Related