Получение или установка ngValue для выбора при изменении события

Question

Я перемещаю некоторый код с выбором из ngModel в реактивную форму и пытаюсь получить выбранную опцию в качестве объекта.Но я не могу знать, как получить и настроить выбранный объект item в myControl.

        <form [formGroup]="myForm">
          <select id="myControl" name="myControl" formControlName="myControl"
          (change)="onChangeItem($event.target.value)" required
          [compareWith]="compareFn">
            <label for="myControl">My Text*</label>
            <option *ngFor="let item of items"
             [ngValue]="item">
             {{item.name}}
            </option>
          </select>
        </form>

В файле ts у меня есть

item = {id: number; name: string};
items = [list of items];
myForm: FormGroup = this.formBuilder.group({
  myControl: [undefined, [CustomValidators.required()]]
},{ updateOn: 'blur' });
compareFn(f1: any, f2: any): boolean {
  return f1.id === f2.id;
}

onChangeItem(value: string) {
  console.log(value); //  for example result will be like "5: Object"
  setInterval(() => { // may be it's not a nessasary just fot test
    console.log(this.myForm.controls.myControl.value); // here value doesn't change and equal the previous one 
    // logic with new selected value 
    this.myForm.controls.myControl.setValue(new value); // if it's not changed automaticaly    
  }, 100);
}

Я могу получить значение идентификатора в виде строки из $event.target.value после записи в опцию ([value]= "item.id") и найти объектиз элементов по id, но в этом случае я должен хранить в myControl строку, а не объект, который меня интересует

Answer 1

Первый подход заключался в использовании атрибутов данных в теге опции

       <select 
        formControlName="myControl"
        (change)="onChangeItem(+$event.target.selectedOptions[0].dataset.value)"
        required>
        <option *ngFor="let item of items"
          [ngValue]="item" [attr.data-value]="item.id">
          {{item.name}}</option>
      </select>

Затем

  onChangeItem(id: number) {
    const curItem = this.items.find(value => value.id === id);
    this.myForm.controls.myControl.setValue(curItem)
  }

Но после того, как я понял, что проблема в триггере updateOn: blurи после удаления это позволит мне получить текущее значение при изменении пользователем select

 onChangeItem() {
    console.log(this.myForm.controls.myControl.value);
  }