Выберите "ключ: значение" для возврата события раскрывающегося списка в качестве целевого значения.

Question

Требуется событие для возврата e.target.value = 'NEW' вместо '1: NEW'

App.component. html

<div class="form-group">
   <label class="label">Status</label>
   <select (change)="changeStatus($event)" class="select-control form-control" 
    formControlName="status">
    <option *ngFor="let item of statusOptions" [ngValue]="item">{{item}}</option>
    </select>
</div>

App.component.ts

statusOptions = ['NEW','PENDING','DENIED','APPROVED', 'ACTIVE', 'DEACTIVED'];
  
changeStatus(e) {
    this.clientRegForm.get('status').setValue(e.target.value, {
      onlySelf: true
    })
    this.val = this.clientRegForm.get('status').value;
 
    // getting val ='1:NEW' but want to get val='NEW'
  }

Answer 1

На самом деле мне не нужно устанавливать значение для элемента управления в component.ts. Он устанавливается на самой странице HTML при выборе параметров.

changeStatus(e) {
    //below statement is not required
    this.clientRegForm.get('status').setValue(e.target.value, {
      onlySelf: true
    })
    this.val = this.clientRegForm.get('status').value;
 
    // getting val ='1:NEW' but want to get val='NEW'
  }

Answer 2

Вы могли бы найти обходной путь:

//Object.values() creates an array of all of the key values of the object
this.val = Object.values(this.clientRegForm.get('status').value)[0];

Я уверен, что есть лучший способ сделать это, но если вы действительно застряли и просто хотите двигаться дальше ¯_ (ツ) _ / ¯