How to take an object value by Its ID selected in mat-select and set the object values into a reactive form?

Question

I have a mat-select with a list of mat-option , but I have 3 informations in each mat-option . Example:

<mat-select [(value)]="accountSelected">
   <mat-option [value]="account" *ngFor="let account of listOfAccounts"> 
         Account {{account.accountNumber}} Agency {{account.agencyNumber}} Digit {{account.digitNumber}} 
   </mat-option>
</mat-select>

But i need to set the value selected in 3 different fields of a form (account, agency, digit), I couldn't find a way to let it reactive as if I was using a form control directly. I thought of using its ID, but I don't know how.

Answer 1

<mat-select [(value)]="accountSelected">
   <mat-option [value]="account" *ngFor="let account of listOfAccounts" (click)="yourFunction(account)"> 
         Account {{account.accountNumber}} Agency {{account.agencyNumber}} Digit {{account.digitNumber}} 
   </mat-option>
</mat-select>

You need add (click)="YourFunction(x)" after *ngFor. You can create a function like this:

yourFunction(x: any): void {console.log(x);}

Now you have the object in "x"