在更改事件中获取或设置 select 的 ngValue

Question

我正在将一些带有 select 的代码从 ngModel 移动到反应形式，并尝试将 selected 选项作为对象。但我不知道如何获取 selected '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);
}

我可以在写入选项 ([value]= "item.id") 后从 $event.target.value 中获取 id 值作为字符串，并通过 id 从项目中找到对象，但在这种情况下，我必须在 myControl 中存储一个字符串，不是我感兴趣的对象

Answer 1

第一种方法是在选项标签

中使用 data-attributes

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

在更改事件中获取或设置 select 的 ngValue

Getting or setting ngValue for select on change event

html-select

angular-reactive-forms