0

I need your help. I have a small piece of code. In my template I have select from option in which I save the list of settings. Each individual setting has its own id. I also have an interface through which I have a data model - the fields that I will send or receive from the backend. Please help with the task: how do I get the id option I choose and send it in the optionId field? Thank you very much

interface.ts

export interface IData {
   id: string;
   name: string;
   optionId: any;
}

html

<select formControlName="templateListValue">
   <option *ngFor="let tempItem of templateListOptions" [value]="templateItem.id">
     {{tempItem.name}}
   </option>
</select>

ts

public getIdFromTemplate() {
   return this.templateListOptions.find
 ((element: ITemplateData) => element.id === this.form.controls.templateListValue.value);
}
  • Option is just an option the user chooses, actual value is stored in the Select element. https://stackoverflow.com/questions/45136548/angular-4-using-objects-for-option-values-in-a-select-list – vfioox May 30 '22 at 14:24
  • you might use this answer https://stackoverflow.com/a/45137528/1769563 or this https://stackoverflow.com/a/49776357/1769563 – Mahmoud Nasr May 30 '22 at 14:30

1 Answers1

0

You can use valueChanges to observe your control for changes and then find the element.

this.formGroup.controls.templateListValue.valueChanges.subscribe(id => {
    const element = this.templateListOptions.find((element: ITemplateData) => element.id === id);
    console.log(element);
    console.log(element.optionId)
})
Mahdi Rezazadeh
  • 511
  • 3
  • 10